/* Wright Technology Portal - Light SaaS Theme (TRUE Full Width + Clean) */

:root{
  --bg: #f5f7fb;
  --card: #ffffff;
  --card2: #fbfcff;

  --border: #e5eaf2;
  --border2: #dbe3ef;

  --text: #0f172a;
  --muted: #475569;

  --primary: #2563eb;
  --primarySoft: #e8efff;

  --success: #16a34a;
  --successSoft: #eafaf0;

  --danger: #dc2626;
  --dangerSoft: #ffecec;

  --radius: 18px;
  --radius-sm: 14px;

  --shadow: 0 14px 40px rgba(15, 23, 42, .08);
  --shadow-sm: 0 10px 24px rgba(15, 23, 42, .06);
}

/* ===== Base ===== */
html, body { height: 100%; width: 100%; }

/* ✅ Kill Water.css max-width on body (and any centering/padding) */
body{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  background:
    radial-gradient(900px 520px at 20% -10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(800px 520px at 90% 5%, rgba(22,163,74,.08), transparent 55%),
    linear-gradient(180deg, #f9fbff, var(--bg));

  color: var(--text);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ✅ IMPORTANT: Water.css often uses "body > main" (more specific) */
body > header,
body > main,
body > footer{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Also ensure any main element isn’t constrained */
main{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Undo Water.css “random” colors */
main, main * { color: var(--text); }
p, small, .muted { color: var(--muted) !important; }

h1,h2,h3,h4,h5,h6,
label, legend, strong, th{
  color: var(--text) !important;
}

/* Links */
a{ color: #1d4ed8; }
a:hover{ color: #1e40af; }

/* ===== Layout (TRUE FULL WIDTH) ===== */
/* Your <main class="container"> must stretch fully */
.container,
main.container,
body > main.container{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 2rem 2.5rem !important;
  box-sizing: border-box;
}

/* Keep the nice “panel” feel, but full width */
main.container,
body > main.container{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

/* Ensure children don’t re-introduce max-width */
main.container > *,
body > main.container > *{
  max-width: none !important;
}

/* Helpers */
.hidden{ display:none !important; }

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  align-items:center;
  justify-content:space-between;
  margin: 0 0 1.2rem 0;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap: .6rem;
  align-items:center;
}

.form-row{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  align-items:flex-start;
}

.flex-1{ flex: 1 1 260px; }
.flex-2{ flex: 2 1 520px; }

/* ===== Header ===== */
.site-header{
  position: sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--border);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Make header inner full width too (Water may constrain it) */
.site-header-inner{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1rem 2.5rem !important;
  box-sizing: border-box;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.brand{
  display:flex;
  gap:.75rem;
  align-items:center;
}

.brand .logo{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
}

.brand .title{ line-height: 1.05; }
.brand .title strong{ display:block; font-size:1.05rem; }
.brand .title span{ display:block; font-size:.85rem; color: var(--muted) !important; }

/* Nav */
.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.6rem;
  flex:1;
}

.site-nav{
  display:flex;
  gap:.35rem;
  align-items:center;
}

.site-nav a{
  text-decoration:none;
  padding: .48rem .9rem;
  border-radius:999px;
  border: 1px solid transparent;
  color: var(--text) !important;
  font-weight:700;
  transition: .15s ease;
}

.site-nav a:hover{
  background: #eef3ff;
  border-color: #d9e5ff;
}

.site-nav a.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff !important;
}

/* Mobile toggle hidden on desktop */
.nav-toggle{
  display:none;
  border-radius:999px;
  padding:.48rem .9rem;
  border:1px solid var(--border2);
  background: #fff;
  color: var(--text);
  font-weight:800;
  cursor:pointer;
}

/* ===== Cards ===== */
.dashboard-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  width: 100%;
}

/* ===== Inputs ===== */
input, textarea, select{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 12px !important;
  padding: .7rem .9rem !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder{
  color: rgba(15,23,42,.45) !important;
}

input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: rgba(37,99,235,.75) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15) !important;
}

/* ===== Buttons (BLACK text) ===== */
.btn, button, input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding: .6rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--border2);
  text-decoration:none;
  cursor:pointer;
  font-weight:900;
  color: #000 !important;
  background: #fff;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn:hover, button:hover, input[type="submit"]:hover{
  transform: translateY(-1px);
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

/* Button variants */
.btn-primary{ background: var(--primarySoft) !important; border-color: #cfe0ff !important; }
.btn-success{ background: var(--successSoft) !important; border-color: #cdeed8 !important; }
.btn-danger { background: var(--dangerSoft)  !important; border-color: #ffd0d0 !important; }
.btn-secondary{ background: #f1f5f9 !important; border-color: #dbe3ef !important; }

/* ===== Alerts ===== */
.alert{
  padding: 1rem 1.1rem;
  border-radius: 14px;
  margin: 1rem 0;
  border: 1px solid var(--border);
  background: var(--card2);
}

.alert-success{ background: var(--successSoft); border-color: #cdeed8; }
.alert-warning{ background: #fff7db; border-color: #ffe9a8; }
.alert-danger { background: var(--dangerSoft); border-color: #ffd0d0; }

/* ===== Tables ===== */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

table th{
  background: #f6f8ff;
  font-weight:900;
}

table th, table td{
  padding: .85rem;
  border-bottom: 1px solid var(--border);
}

tr[id^="edit-"]{ background-color: #f8fafc !important; }

/* ===== Footer ===== */
.site-footer{
  width: 100% !important;
  max-width: none !important;
  margin: 1.6rem 0 1rem !important;
  padding: 0 2.5rem !important;
  color: var(--muted) !important;
  font-size: .9rem;
  box-sizing: border-box;
}

/* ===== Mobile ===== */
@media (max-width: 860px){
  .container,
  main.container,
  body > main.container{
    padding: 1.25rem 1rem !important;
  }

  .site-header-inner{
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
    padding: 1rem 1rem !important;
  }

  .header-right{
    width:100%;
    justify-content: space-between;
  }

  .nav-toggle{ display:inline-flex; }

  .site-nav{
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: .7rem;
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  .site-nav.open{ display:flex; }
  .site-nav a{ width:100%; }
}