/*
  Obverra – Enterprise SaaS UI Styles

  This stylesheet defines a clean, professional look using an ocean‑inspired colour
  palette. Colours are defined as CSS variables at the top for easy changes and
  consistency across the site. Layouts are flexible and responsive, using flex
  and grid where appropriate. Subtle transitions give the interface a refined
  feel without distracting from content. Empty states use muted text and
  intentional spacing to look purposeful.
*/

/* Colour palette */
:root {
  --primary-dark: #003a5d;
  --primary: #005f88;
  --secondary: #008da8;
  --accent: #00a7c7;
  --light: #e8f4f8;
  --gray-light: #f5f7fa;
  --gray: #e1e8ed;
  --text-dark: #102b44;
  --text-muted: #6c7a8a;
  --danger: #c0392b;
  --white: #ffffff;
}

/* Global base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--gray-light);
  color: var(--text-dark);
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: var(--accent);
}

a:hover {
  text-decoration: underline;
}

/* Header and navigation */
header {
  background-color: var(--primary-dark);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

header nav a {
  color: var(--white);
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  font-weight: 500;
}

header nav a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--secondary);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--white);
}

.btn-secondary:hover {
  background-color: var(--primary);
}

/* Hero section on home page */
.hero {
  background: linear-gradient(rgba(0, 26, 53, 0.6), rgba(0, 26, 53, 0.7)), url('images/ocean-bg.png') no-repeat center/cover;
  color: var(--white);
  padding: 6rem 2rem;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 2rem auto;
  color: var(--gray-light);
}

/* Section styles */
section {
  padding: 3rem 2rem;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.section-text {
  max-width: 800px;
  margin: 0 auto 2rem auto;
  text-align: center;
  color: var(--text-muted);
}

/* Cards used in how it works and use cases */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background-color: var(--white);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Form elements */
form {
  max-width: 400px;
  margin: 0 auto;
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border: 1px solid var(--gray);
  border-radius: 4px;
  font-size: 1rem;
}

form label {
  font-weight: bold;
  margin-bottom: 0.3rem;
  display: block;
}

form .error {
  color: var(--danger);
  margin-bottom: 1rem;
  text-align: center;
}

/* Dashboard layout */
.dashboard-container {
  display: flex;
  min-height: calc(100vh - 64px);
}

.sidebar {
  width: 220px;
  background-color: var(--primary-dark);
  color: var(--white);
  padding-top: 2rem;
  flex-shrink: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 1rem;
}

.sidebar a {
  color: var(--white);
  display: block;
  padding: 0.8rem 1.2rem;
  transition: background-color 0.3s ease;
}

.sidebar a:hover,
.sidebar a.active {
  background-color: var(--primary);
}

.dashboard-content {
  flex: 1;
  background-color: var(--gray-light);
  padding: 2rem;
  overflow-x: hidden;
}

/* Overview cards */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.overview-card {
  background-color: var(--white);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.overview-card h4 {
  margin: 0 0 0.5rem 0;
}

.overview-card .empty-state {
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.5rem;
}

/* Bar chart container */
.chart-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

canvas {
  max-width: 100%;
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--white);
}

th, td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray);
  text-align: left;
}

th {
  background-color: var(--gray);
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  background-color: var(--gray-light);
}

.empty-table {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Calendar styles */
.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--gray);
}

.calendar-grid div {
  background-color: var(--white);
  min-height: 80px;
  padding: 0.5rem;
  position: relative;
  font-size: 0.85rem;
}

.calendar-grid .day-number {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.calendar-grid .events {
  font-size: 0.75rem;
  color: var(--primary);
}

.calendar-grid .empty {
  color: var(--text-muted);
}

/* Footer */
footer {
  background-color: var(--primary-dark);
  color: var(--white);
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .dashboard-container {
    flex-direction: column;
  }
  header nav ul {
    gap: 1rem;
  }
  .hero {
    padding: 4rem 1rem;
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
}