/* ==========================================================
   Gulfmates — design tokens
   A Gulf trading-post palette (sea teal + sand + ledger gold)
   with a wax-stamp motif standing in for the lawyer's seal of
   approval — the one authoritative act the whole app revolves
   around.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:#132C2E;
  --sea:#0E4B4E;
  --sea-light:#186569;
  --sand:#F1E6D2;
  --paper:#FFFDF8;
  --line:#DCCFB0;
  --gold:#C0872B;
  --gold-dark:#9C6C1E;
  --approve:#2F6F4E;
  --reject:#A63D40;
  --muted:#6D6656;
  --radius:14px;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --shadow: 0 1px 2px rgba(19,44,46,.06), 0 8px 24px -12px rgba(19,44,46,.25);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); margin:0 0 .3em; letter-spacing:.2px;}
p{margin:0 0 1em;}
button, input, textarea, select{font-family:inherit; font-size:1em;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px; border:1px solid transparent;
  background:var(--sea); color:#fff; font-weight:600; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{background:var(--sea-light); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-gold{background:var(--gold); color:#241a05;}
.btn-gold:hover{background:var(--gold-dark); color:#fff;}
.btn-outline{background:transparent; border-color:var(--sea); color:var(--sea);}
.btn-outline:hover{background:var(--sea); color:#fff;}
.btn-approve{background:var(--approve); color:#fff;}
.btn-reject{background:var(--reject); color:#fff;}
.btn-sm{padding:6px 12px; font-size:.85em; border-radius:8px;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-block{width:100%; justify-content:center;}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--muted); padding:4px;}
.icon-btn:hover{color:var(--reject);}

/* ---------- Cards / surfaces ---------- */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px;
}
.field{margin-bottom:16px;}
.field label{display:block; font-weight:600; font-size:.85em; margin-bottom:6px; color:var(--ink);}
.field input, .field textarea, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink);
}
.field textarea{resize:vertical; min-height:90px;}
.hint{color:var(--muted); font-size:.82em; margin-top:4px;}
.error-msg{background:#FBEAEA; border:1px solid var(--reject); color:var(--reject); padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:.9em;}
.success-msg{background:#EAF3EC; border:1px solid var(--approve); color:var(--approve); padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:.9em;}

/* ---------- Landing / auth ---------- */
.auth-shell{
  min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr;
}
@media (max-width:860px){ .auth-shell{grid-template-columns:1fr;} .auth-visual{display:none;} }

.auth-visual{
  background:radial-gradient(120% 140% at 20% 10%, var(--sea-light), var(--ink) 70%);
  color:var(--sand); padding:60px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-visual::after{
  content:''; position:absolute; inset:auto -20% -30% auto; width:70%; aspect-ratio:1;
  border-radius:50%; border:1.5px dashed rgba(241,230,210,.25);
}
.brand{font-family:var(--font-display); font-size:1.6em; font-weight:700; letter-spacing:.5px;}
.brand .dot{color:var(--gold);}
.tagline{font-size:2.1em; max-width:9.5em; line-height:1.2; font-family:var(--font-display); font-weight:600;}
.roles-legend{display:flex; gap:22px; flex-wrap:wrap; font-size:.85em; color:rgba(241,230,210,.8);}
.roles-legend b{color:var(--sand); display:block; font-family:var(--font-display); font-size:1.3em;}

.auth-form-side{display:flex; align-items:center; justify-content:center; padding:40px;}
.auth-box{width:100%; max-width:400px;}
.tabs{display:flex; gap:4px; background:var(--line); padding:4px; border-radius:999px; margin-bottom:26px;}
.tabs button{flex:1; border:none; background:transparent; padding:9px; border-radius:999px; cursor:pointer; font-weight:600; color:var(--muted);}
.tabs button.active{background:var(--paper); color:var(--ink); box-shadow:var(--shadow);}
.role-pick{display:flex; gap:8px; margin-bottom:6px;}
.role-pick label{flex:1; border:1.5px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center; cursor:pointer; font-size:.82em; font-weight:600; color:var(--muted);}
.role-pick input{display:none;}
.role-pick input:checked + span{color:var(--sea);}
.role-pick label:has(input:checked){border-color:var(--sea); background:#EAF3F3;}

/* ---------- App shell (dashboards) ---------- */
.app-shell{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
@media (max-width:780px){ .app-shell{grid-template-columns:1fr;} .sidebar{position:sticky; top:0; z-index:5;} }
.sidebar{
  background:var(--ink); color:var(--sand); padding:26px 18px; display:flex; flex-direction:column; gap:26px;
}
.sidebar .brand{color:var(--sand); font-size:1.3em;}
.role-tag{font-family:var(--font-mono); font-size:.7em; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); background:rgba(192,135,43,.12); display:inline-block; padding:3px 8px; border-radius:5px; width:fit-content;}
.nav-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; flex:1;}
.nav-list a, .nav-list button{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:rgba(241,230,210,.75);
  text-decoration:none; font-weight:500; background:none; border:none; cursor:pointer; text-align:left; width:100%; font-size:.95em;
}
.nav-list a:hover, .nav-list button:hover, .nav-list a.active{background:rgba(241,230,210,.08); color:var(--sand);}
.sidebar-foot{border-top:1px solid rgba(241,230,210,.15); padding-top:14px; font-size:.85em;}
.main{padding:34px 30px 60px;}
.topline{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; gap:16px; flex-wrap:wrap;}
.topline h1{font-size:1.7em;}
.topline .sub{color:var(--muted); font-size:.95em;}

/* ---------- Stamp (signature element) ----------
   A rotated wax-seal used everywhere a blog's verification
   status shows: pending / approved / rejected. */
.stamp{
  --c:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:50%;
  border:2.5px solid var(--c); position:relative;
  color:var(--c); font-family:var(--font-display); font-weight:700;
  font-size:.72em; letter-spacing:1px; text-transform:uppercase;
  transform:rotate(-8deg); text-align:center; line-height:1.15;
  flex-shrink:0;
}
.stamp::before{
  content:''; position:absolute; inset:5px; border:1px solid var(--c); border-radius:50%; opacity:.6;
}
.stamp.pending{--c:var(--gold-dark);}
.stamp.approved{--c:var(--approve);}
.stamp.rejected{--c:var(--reject);}
.stamp.sm{width:46px; height:46px; font-size:.58em;}

.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.72em; text-transform:uppercase; letter-spacing:.8px; padding:4px 10px; border-radius:999px; border:1px solid; }
.badge-pending{color:var(--gold-dark); border-color:var(--gold-dark); background:#FBF3E2;}
.badge-approved{color:var(--approve); border-color:var(--approve); background:#EAF3EC;}
.badge-rejected{color:var(--reject); border-color:var(--reject); background:#FBEAEA;}

/* ---------- Lists / grids ---------- */
.grid{display:grid; gap:18px;}
.grid-cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:780px){ .grid-cols-2{grid-template-columns:1fr;} }
.tab-switch{display:flex; gap:8px; margin-bottom:22px; border-bottom:1px solid var(--line);}
.tab-switch button{background:none; border:none; padding:10px 4px; margin-right:20px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; position:relative; top:1px;}
.tab-switch button.active{color:var(--sea); border-bottom-color:var(--sea);}
.count-pill{background:var(--line); color:var(--ink); border-radius:999px; padding:1px 8px; font-size:.75em; margin-left:6px;}

.req-card, .blog-card{display:flex; gap:16px; align-items:flex-start;}
.req-card .meta, .blog-card .meta{flex:1; min-width:0;}
.req-card h3, .blog-card h3{margin-bottom:4px; font-size:1.1em;}
.req-card .tags{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0;}
.tag{background:var(--sand); border:1px solid var(--line); font-size:.75em; padding:2px 9px; border-radius:999px; color:var(--muted);}
.tag.paid{background:#EAF3EC; border-color:var(--approve); color:var(--approve);}
.card-foot{display:flex; gap:10px; margin-top:12px; align-items:center; flex-wrap:wrap;}
.empty-state{text-align:center; padding:60px 20px; color:var(--muted);}
.empty-state h3{color:var(--ink);}

/* ---------- Chat ---------- */
.chat-wrap{display:flex; flex-direction:column; height:calc(100vh - 160px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.chat-head{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.chat-body{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:70%; padding:10px 14px; border-radius:14px; font-size:.92em; line-height:1.4;}
.msg .t{font-family:var(--font-mono); font-size:.68em; opacity:.6; margin-top:4px; display:block;}
.msg.me{align-self:flex-end; background:var(--sea); color:#fff; border-bottom-right-radius:4px;}
.msg.them{align-self:flex-start; background:var(--sand); border-bottom-left-radius:4px;}
.chat-form{display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--line);}
.chat-form input{flex:1;}

/* ---------- Blog composer / view ---------- */
.emoji-row{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0;}
.emoji-row button{border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 8px; cursor:pointer; font-size:1.1em;}
.media-preview{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.media-preview img, .media-preview video{width:110px; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
.blog-media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:14px 0;}
.blog-media-grid img, .blog-media-grid video{width:100%; height:150px; object-fit:cover; border-radius:10px; border:1px solid var(--line);}
.reject-box{background:#FBEAEA; border:1px solid var(--reject); border-radius:8px; padding:12px 14px; margin-top:10px; font-size:.88em; color:var(--ink);}
.reject-box b{color:var(--reject);}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(19,44,46,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal{background:var(--paper); border-radius:var(--radius); max-width:640px; width:100%; max-height:88vh; overflow-y:auto; padding:26px;}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:10px;}

.hidden{display:none !important;}
.text-muted{color:var(--muted);}
.mt-16{margin-top:16px;}
.stack{display:flex; flex-direction:column; gap:14px;}
.row{display:flex; gap:10px; align-items:center;}
.spread{display:flex; justify-content:space-between; align-items:center;}