/* /assets/app.css
   AQUA UI Theme on top of Bootstrap 5
   Keep it simple: clean, modern, readable, responsive.
*/

:root{
  --aqua-bg: #f6f7fb;
  --aqua-card: #ffffff;
  --aqua-text: #0f172a;
  --aqua-muted: #64748b;
  --aqua-border: rgba(15, 23, 42, 0.10);
  --aqua-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --aqua-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
  --aqua-radius: 16px;
}

html, body { height: 100%; }

body{
  background: var(--aqua-bg) !important;
  color: var(--aqua-text);
}

/* Typography polish (Bootstrap default is fine, this just upgrades it a bit) */
h1,h2,h3,h4,h5{
  letter-spacing: -0.02em;
}

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

/* Page wrapper */
.aqua-page{
  min-height: 100vh;
  padding: 24px 0;
}

.aqua-container{
  max-width: 1100px;
}

/* Topbar */
.aqua-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.aqua-title{
  margin:0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.aqua-subtitle{
  margin-top: 2px;
  color: var(--aqua-muted);
  font-size: .9rem;
}

/* Card upgrade */
.card{
  border: 1px solid var(--aqua-border);
  border-radius: var(--aqua-radius);
}

.card.shadow-sm{
  box-shadow: var(--aqua-shadow-sm) !important;
}

.aqua-card{
  background: var(--aqua-card);
  box-shadow: var(--aqua-shadow);
}

/* Clickable dashboard cards */
a.card{
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
a.card:hover{
  transform: translateY(-1px);
  box-shadow: var(--aqua-shadow);
  border-color: rgba(15, 23, 42, 0.16);
}

/* Buttons */
.btn{
  border-radius: 12px;
}
.btn-primary{
  box-shadow: 0 8px 18px rgba(13,110,253,0.18);
}
.btn-outline-secondary,
.btn-outline-primary{
  background: #fff;
}

/* Form controls */
.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(15, 23, 42, 0.14);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.12);
}

/* Alerts soften */
.alert{
  border-radius: 14px;
  border: 1px solid var(--aqua-border);
}

/* Tables: more modern, sticky header, better spacing */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  font-size: .85rem;
  color: var(--aqua-muted);
  text-transform: none;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  border-bottom: 1px solid var(--aqua-border);
}
.table tbody td{
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.table-responsive{
  border-radius: 14px;
  overflow: hidden;
}

/* Truncate helper (instead of inline style) */
.aqua-truncate{
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Login layout */
.aqua-auth{
  min-height: 100vh;
  display:flex;
  align-items:center;
  padding: 28px 0;
}
.aqua-auth-box{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.aqua-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.aqua-dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #0d6efd;
  box-shadow: 0 0 0 6px rgba(13,110,253,.10);
}

/* Mobile tweaks */
@media (max-width: 576px){
  .aqua-page{ padding: 16px 0; }
  .btn{ width: 100%; }
  .aqua-truncate{ max-width: 200px; }
}
/* Entry edit helpers */
.aqua-section{
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.7);
}

.aqua-section + .aqua-section{
  margin-top: 12px;
}

.aqua-section-title{
  font-weight: 700;
  margin: 0;
}

.aqua-section-hint{
  color: var(--aqua-muted);
  font-size: .9rem;
  margin-top: 2px;
}

.abs-row{
  display:flex;
  gap:.75rem;
  align-items:end;
  flex-wrap:wrap;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.abs-row > div{
  flex: 1 1 160px;
}

.abs-row .abs-actions{
  flex: 0 0 auto;
}

@media (max-width: 576px){
  .abs-row{ padding: 10px; }
  .abs-row .btn{ width: auto; }
}