/* Sense Lens Studio brand tokens — copied from Sense-Lens-Brand-Kit/color-and-type/brand-colors.css
   so this internal tool actually looks like a Sense Lens product, not a generic dev dashboard. */
:root {
  --sl-terracotta: #D99B72;
  --sl-terracotta-deep: #A86548;
  --sl-gold: #C69A54;
  --sl-blush: #F3C8B3;
  --sl-beige: #D9C2A6;
  --sl-success: #6DAE7B;
  --sl-alert: #B5533E;
  --sl-deposit-highlight: #F3E2D3;
  --sl-bg-top: #FFFAF3;
  --sl-bg-bottom: #FFF6EC;
  --sl-bg-section-alt: #F5ECE6;
  --sl-card: #FFFDF9;
  --sl-card-elevated: #FFFFFF;
  --sl-border: #EAD7C5;
  --sl-ink: #4B3328;
  --sl-muted: #8A6E60;
  --sl-shadow-card: 0 8px 22px rgba(84,55,38,.06);
  --sl-shadow-elevated: 0 16px 45px rgba(102,66,45,.10);
  --sl-shadow-button: 0 10px 25px rgba(157,91,58,.22);
  --sl-gradient-button: linear-gradient(135deg, #B87352, #D79B76);
  --sl-gradient-page: linear-gradient(180deg, #FFFAF3 0%, #FFF6EC 100%);
  --radius: 14px;
  --radius-sm: 9px;
}

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sl-gradient-page);
  color: var(--sl-ink);
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; background: rgba(255,253,249,.75); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sl-border); position: sticky; top: 0; z-index: 10;
  flex-wrap: wrap; gap: 14px;
}
h1 { font-size: 20px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--sl-terracotta-deep); }
.badge { font-size: 11px; font-weight: 700; background: var(--sl-alert); color: #fff; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
nav { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn {
  background: var(--sl-card); border: 1px solid var(--sl-border); color: var(--sl-muted);
  padding: 9px 18px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500;
  font-family: inherit; transition: all .15s ease;
}
.tab-btn:hover { border-color: var(--sl-terracotta); color: var(--sl-terracotta-deep); }
.tab-btn.active { background: var(--sl-gradient-button); color: #fff; border-color: transparent; box-shadow: var(--sl-shadow-button); font-weight: 700; }

main { padding: 28px 32px 60px; max-width: 1100px; margin: 0 auto; }
.tab-panel { display: none; animation: fade-in .25s ease; }
.tab-panel.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

h2 { font-size: 19px; font-weight: 800; margin: 0 0 4px; color: var(--sl-ink); }
h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--sl-ink); }
.hint { color: var(--sl-muted); font-size: 13px; line-height: 1.7; margin: 0 0 18px; }

.card {
  background: var(--sl-card-elevated); border: 1px solid var(--sl-border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px;
  box-shadow: var(--sl-shadow-card);
}
.card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sl-muted); font-weight: 500; }
.card input, .card select, .card textarea {
  background: var(--sl-bg-top); border: 1px solid var(--sl-border); color: var(--sl-ink);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-family: inherit;
  transition: border-color .15s ease;
}
.card input:focus, .card select:focus, .card textarea:focus {
  outline: none; border-color: var(--sl-terracotta); box-shadow: 0 0 0 3px rgba(217,155,114,.18);
}
.row { display: flex; gap: 14px; }
.row label { flex: 1; }

button {
  background: var(--sl-gradient-button); border: none; color: #fff; font-weight: 700;
  padding: 10px 20px; border-radius: 999px; cursor: pointer; font-size: 14px;
  font-family: inherit; box-shadow: var(--sl-shadow-button); transition: filter .15s ease, transform .1s ease;
}
button:hover { filter: brightness(1.05); }
button:active { transform: scale(.98); }
button.secondary { background: var(--sl-card); border: 1px solid var(--sl-border); color: var(--sl-terracotta-deep); box-shadow: none; font-weight: 600; }
button.secondary:hover { border-color: var(--sl-terracotta); }
button.ghost { background: transparent; border: 1px dashed var(--sl-border); color: var(--sl-muted); box-shadow: none; }

.tabs-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 20px; }
.tabs-divider .line { flex: 1; height: 1px; background: var(--sl-border); }
.tabs-divider span { font-size: 12px; color: var(--sl-muted); font-weight: 600; }

.list { display: flex; flex-direction: column; gap: 12px; }
.item {
  background: var(--sl-card-elevated); border: 1px solid var(--sl-border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--sl-shadow-card);
}
.item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.status.approved, .status.sent, .status.running { background: rgba(109,174,123,.15); color: #3f7a4c; }
.status.pending, .status.draft { background: var(--sl-deposit-highlight); color: var(--sl-gold); }
.status.rejected, .status.failed { background: rgba(181,83,62,.12); color: var(--sl-alert); }
.status.completed { background: var(--sl-bg-section-alt); color: var(--sl-muted); }
.status.ACTIVE { background: rgba(109,174,123,.15); color: #3f7a4c; }

table { width: 100%; border-collapse: collapse; background: var(--sl-card-elevated); border: 1px solid var(--sl-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sl-shadow-card); }
th, td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--sl-border); font-size: 13px; }
tr:last-child td { border-bottom: none; }
th { color: var(--sl-muted); font-weight: 700; background: var(--sl-bg-section-alt); font-size: 12px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.stat-tile { background: var(--sl-bg-top); border: 1px solid var(--sl-border); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; }
.stat-tile .num { font-size: 18px; font-weight: 800; color: var(--sl-terracotta-deep); display: block; }
.stat-tile .label { font-size: 11px; color: var(--sl-muted); }

.inbox-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; min-height: 420px; }
.conversations { display: flex; flex-direction: column; gap: 8px; }
.conv-item { background: var(--sl-card-elevated); border: 1px solid var(--sl-border); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; transition: border-color .15s ease; }
.conv-item:hover { border-color: var(--sl-terracotta); }
.conv-item.active { border-color: var(--sl-terracotta-deep); box-shadow: 0 0 0 2px rgba(217,155,114,.15); }
.conv-item .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sl-alert); display: inline-block; margin-inline-start: 6px; }
.thread { background: var(--sl-card-elevated); border: 1px solid var(--sl-border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; box-shadow: var(--sl-shadow-card); }
.messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 460px; }
.msg { max-width: 70%; padding: 9px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
.msg.in { align-self: flex-start; background: var(--sl-bg-section-alt); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--sl-gradient-button); color: #fff; border-bottom-right-radius: 4px; }
.reply-box { display: flex; gap: 8px; }
.reply-box textarea { flex: 1; }

.file-drop {
  border: 1.5px dashed var(--sl-border); border-radius: var(--radius-sm); padding: 18px; text-align: center;
  color: var(--sl-muted); font-size: 13px; cursor: pointer; background: var(--sl-bg-top);
}
.file-drop:hover { border-color: var(--sl-terracotta); color: var(--sl-terracotta-deep); }
.file-drop input { display: none; }

.link-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sl-muted); }