/* css/components.css */

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.add-btn { 
  display: flex; align-items: center; gap: 5px; padding: 6px 12px; 
  background: var(--gold); color: var(--z950); border: none; border-radius: 8px; 
  font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 900; 
  cursor: pointer; transition: all .15s; box-shadow: 0 2px 8px rgba(245,158,11,.25) 
}
.add-btn:hover { background: var(--gold-l); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,158,11,.35) }
.add-btn:active { transform: scale(.97) }
.add-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3 }

.btn { 
  height: 38px; padding: 0 16px; border: none; border-radius: 8px; 
  font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 700; 
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .15s 
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2 }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none }

.btn-p { background: var(--gold); color: var(--z950); box-shadow: 0 2px 8px rgba(245,158,11,.25) } 
.btn-p:hover { background: var(--gold-l); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,158,11,.35) }
.btn-g { background: var(--g-bg); color: var(--g-t); border: 1px solid rgba(16,185,129,.2) } 
.btn-g:hover { background: rgba(16,185,129,.2) }
.btn-d { background: var(--r-bg); color: var(--r); border: 1px solid rgba(248,113,113,.2) } 
.btn-d:hover { background: rgba(248,113,113,.2) }
.btn-ghost { background: var(--z800); border: 1px solid var(--z700); color: var(--z300) } 
.btn-ghost:hover { background: var(--z700); color: var(--white) }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS & INPUTS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px }
.fg { margin-bottom: 12px }
.fl { font-size: 11.5px; font-weight: 700; color: var(--z400); letter-spacing: .3px; margin-bottom: 7px; display: block; text-transform: uppercase }
.fi { width: 100%; height: 42px; background: var(--z800); border: 1px solid var(--z700); border-radius: 8px; padding: 0 12px; font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--white); outline: none; transition: all .15s }
.fs { width: 100%; height: 42px; background: var(--z800); border: 1px solid var(--z700); border-radius: 8px; padding: 0 12px; font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--white); outline: none; cursor: pointer }
.ft { width: 100%; min-height: 80px; background: var(--z800); border: 1px solid var(--z700); border-radius: 8px; padding: 9px 12px; font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--white); outline: none; resize: vertical; transition: all .15s }
.fi::placeholder, .ft::placeholder { color: var(--z600) }
.fi:focus, .ft:focus { border-color: rgba(245,158,11,.4); box-shadow: 0 0 0 3px rgba(245,158,11,.08) }
.fs option { background: var(--z900); color: var(--white) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   MODALS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.mo-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 500; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); animation: bgi .2s ease }
.mo-bg.ON { display: flex }
@keyframes bgi { from { opacity: 0 } to { opacity: 1 } }
.mo-box { background: var(--z900); border: 1px solid var(--z700); border-radius: 18px; width: 100%; max-width: 460px; max-height: 90vh; overflow: hidden; margin: 0 16px; animation: mdi .28s cubic-bezier(.16,1,.3,1); box-shadow: 0 40px 80px rgba(0,0,0,.6); display: flex; flex-direction: column; }
@keyframes mdi { from { opacity: 0; transform: scale(.95) translateY(12px) } to { opacity: 1; transform: scale(1) translateY(0) } }
.mo-hd { padding: 18px 20px 14px; border-bottom: 1px solid var(--z800); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--z900); z-index: 10; }
.mo-t { font-size: 15.5px; font-weight: 900; color: var(--white); letter-spacing: -.3px; line-height: 1.4 }
.mo-s { font-size: 11.5px; color: var(--z400); margin-top: 4px }
.mo-x { width: 28px; height: 28px; border-radius: 50%; background: var(--z800); border: 1px solid var(--z700); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; color: var(--white); flex-shrink: 0; margin-top: 2px }
.mo-x:hover { background: var(--r-bg); border-color: rgba(248,113,113,.2); color: var(--r) }
.mo-x svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5 }
.m-bd { padding: 20px; flex: 1; overflow-y: auto; }
.br { padding: 16px 20px; border-top: 1px solid var(--z800); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: var(--z900); z-index: 10; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   TOAST NOTIFICATIONS
━━━━━━━━━━━━━━━━━━━━━━━━ */
#toast { position: fixed; bottom: 20px; left: 20px; z-index: 700; display: flex; flex-direction: column; gap: 7px; pointer-events: none }
.tst {
  background: var(--z800); color: var(--white); padding: 11px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); min-width: 190px; pointer-events: auto;
  animation: ti .25s cubic-bezier(.16,1,.3,1);
  border: 1px solid var(--z700);
}
.tst.ok { border-right: 4px solid var(--g) }
.tst.err { border-right: 4px solid var(--r) }
@keyframes ti { from { opacity: 0; transform: translateY(8px) scale(.97) } to { opacity: 1; transform: translateY(0) scale(1) } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   TABS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.tabs { 
  display: flex; gap: 2px; background: var(--z800); border: 1px solid var(--z700); 
  border-radius: 10px; padding: 3px; width: fit-content; margin-bottom: 20px 
}
.tb { 
  padding: 6px 14px; border-radius: 7px; border: none; background: none; 
  font-family: 'Tajawal', sans-serif; font-size: 12.5px; font-weight: 600; 
  color: var(--z400); cursor: pointer; transition: all .15s; white-space: nowrap 
}
.tb.ACT { background: var(--z700); color: var(--white) }
.tb:hover:not(.ACT) { color: var(--z300) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   BADGES & CHIPS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.bdg {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 20px; font-size: 11px; font-weight: 700; gap: 4px;
}
.bdg-g { background: var(--g-bg); color: var(--g-t) }
.bdg-r { background: var(--r-bg); color: var(--r) }
.bdg-y { background: var(--gold-bg); color: var(--gold) }
.bdg-b { background: var(--b-bg); color: var(--b) }


/* ━━━━━━━━━━━━━━━━━━━━━━━━
   SMART BOT (CHAT UI)
━━━━━━━━━━━━━━━━━━━━━━━━ */
.smart-bot-fab {
  position: fixed; bottom: 24px; left: 24px; z-index: 600;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
}
.smart-bot-fab:hover { transform: scale(1.1); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.6); }

.smart-bot-panel {
  position: fixed; bottom: 90px; left: 24px; z-index: 600;
  width: 380px; max-width: calc(100vw - 48px); height: 550px; max-height: calc(100vh - 120px);
  background: var(--z900); border: 1px solid var(--z800); border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.95) rotate(-2deg);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom left;
  font-family: 'Tajawal', sans-serif;
}
.smart-bot-panel.open {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1) rotate(0);
}

.sb-panel-hd {
  padding: 16px 20px; background: var(--z900); border-bottom: 1px solid var(--z800);
  display: flex; justify-content: space-between; align-items: center;
}
.sb-avatar {
  width: 40px; height: 40px; background: rgba(139,92,246,0.15);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border: 1px solid rgba(139,92,246,0.3);
}
.sb-title { font-size: 15px; font-weight: 900; color: var(--white); }
.sb-status { font-size: 11px; color: #10b981; display: flex; align-items: center; gap: 5px; margin-top: 3px; font-weight: 600; }
.sb-status::before { content: ''; width: 6px; height: 6px; background: #10b981; border-radius: 50%; display: inline-block; animation: blink 1.5s infinite; }
.sb-close {
  background: var(--z800); width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--z700); color: var(--z400); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; transition: all 0.2s;
}
.sb-close:hover { background: var(--r-bg); color: var(--r); border-color: rgba(248,113,113,.2); transform: rotate(90deg); }

.sb-chat-body {
  flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
  background: var(--z950);
}
.sb-chat-body::-webkit-scrollbar { width: 6px; }
.sb-chat-body::-webkit-scrollbar-thumb { background: var(--z700); border-radius: 10px; }

.sb-msg {
  max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.7;
  animation: msgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; position: relative; opacity: 0; transform: translateY(10px);
}
@keyframes msgIn { to { opacity: 1; transform: translateY(0); } }

.sb-msg.bot {
  background: var(--z800); color: var(--white); border: 1px solid var(--z700);
  border-bottom-right-radius: 4px; align-self: flex-start; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.sb-msg.user {
  background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff;
  border-bottom-left-radius: 4px; align-self: flex-end; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.sb-typing {
  color: var(--v); font-size: 12.5px; font-weight: 600; align-self: flex-start;
  padding: 0 10px; animation: pulse-live 1.5s infinite; display: none;
}

.sb-chat-footer {
  padding: 16px; background: var(--z900); border-top: 1px solid var(--z800);
  display: flex; gap: 10px; align-items: center;
}
.sb-input {
  flex: 1; height: 46px; background: var(--z800); border: 1px solid var(--z700);
  border-radius: 12px; padding: 0 16px; color: var(--white); font-family: 'Tajawal', sans-serif;
  font-size: 13.5px; outline: none; transition: all 0.2s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.sb-input:focus { border-color: #8b5cf6; background: var(--z950); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
.sb-send {
  width: 46px; height: 46px; border-radius: 12px; background: var(--z800);
  border: 1px solid var(--z700); color: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.sb-send:hover { background: #8b5cf6; border-color: #8b5cf6; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.sb-send svg { transition: transform 0.2s; }
.sb-send:hover svg { transform: translateX(-3px) scale(1.1); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE COMPONENT OVERRIDES
━━━━━━━━━━━━━━━━━━━━━━━━ */
html[data-theme="light"] .btn-ghost { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268 }
html[data-theme="light"] .btn-ghost:hover { background: #E2E5EF; color: #0A0E1A }

html[data-theme="light"] .fi, html[data-theme="light"] .fs, html[data-theme="light"] .ft { background: #F4F5FA; border-color: #E2E5EF; color: #0A0E1A }
html[data-theme="light"] .fi::placeholder, html[data-theme="light"] .ft::placeholder { color: #B0B8CC }
html[data-theme="light"] .fi:focus, html[data-theme="light"] .ft:focus { background: #fff; border-color: rgba(192,120,0,.4); box-shadow: 0 0 0 3px rgba(192,120,0,.08) }
html[data-theme="light"] .fs option { background: #fff; color: #0A0E1A }

html[data-theme="light"] .mo-box { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .mo-hd { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .mo-t { color: #0A0E1A }
html[data-theme="light"] .mo-x { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268 }
html[data-theme="light"] .mo-x:hover { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #DC2626 }
html[data-theme="light"] .br { background: #F9FAFB; border-color: #E2E5EF }

html[data-theme="light"] .tst { background: #0A0E1A; border-color: rgba(0,0,0,.15); color: #fff }
html[data-theme="light"] .tst.ok { background: #064E3B; border-color: rgba(5,150,105,.2) }
html[data-theme="light"] .tst.err { background: #7F1D1D; border-color: rgba(220,38,38,.2) }

/* Tabs Light Mode Fix */
html[data-theme="light"] .tabs { background: #F0F2F7; border-color: #DDE0EA }
html[data-theme="light"] .tb { color: #8A93AE }
html[data-theme="light"] .tb.ACT { background: #fff; color: #0A0E1A; box-shadow: 0 1px 4px rgba(0,0,0,.08) }
html[data-theme="light"] .tb:hover:not(.ACT) { color: #4A5268 }

/* Smart Bot Light Mode Overrides */
html[data-theme="light"] .smart-bot-panel { background: #fff; border-color: #E2E5EF; box-shadow: 0 15px 50px rgba(0,0,0,0.1); }
html[data-theme="light"] .sb-panel-hd { background: #fff; border-color: #E2E5EF; }
html[data-theme="light"] .sb-title { color: #0A0E1A; }
html[data-theme="light"] .sb-close { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268; }
html[data-theme="light"] .sb-chat-body { background: #F9FAFB; }
html[data-theme="light"] .sb-msg.bot { background: #fff; color: #0A0E1A; border-color: #E2E5EF; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
html[data-theme="light"] .sb-chat-footer { background: #fff; border-color: #E2E5EF; }
html[data-theme="light"] .sb-input { background: #F4F5FA; border-color: #E2E5EF; color: #0A0E1A; box-shadow: none; }
html[data-theme="light"] .sb-input:focus { background: #fff; }
html[data-theme="light"] .sb-send { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268; }
html[data-theme="light"] .sb-send:hover { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }