/* public/assets/css/app.css */

/* ---------- THEME TOKENS ---------- */
:root {
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 12px 40px rgba(0,0,0,.16);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.12);

  --bg: #0b0f14;
  --panel: rgba(15, 22, 32, .85);
  --panel-2: rgba(15, 22, 32, .55);
  --border: rgba(140, 160, 190, .18);
  --text: #e6edf3;
  --muted: rgba(230, 237, 243, .70);

  --primary: #1f6feb;
  --primary-2: #3b82f6;
  --danger: #ef4444;
  --success: #22c55e;
  --warn: #f59e0b;

  --focus: rgba(31, 111, 235, .35);
  --glass: blur(14px);
  --grid: rgba(255,255,255,.04);
}

:root[data-theme="light"] {
  --bg: #f6f7fb;
  --panel: rgba(255,255,255,.90);
  --panel-2: rgba(255,255,255,.70);
  --border: rgba(20, 30, 60, .12);
  --text: #0b1220;
  --muted: rgba(11,18,32,.70);

  --shadow: 0 14px 40px rgba(20,30,60,.10);
  --shadow-soft: 0 10px 24px rgba(20,30,60,.08);

  --grid: rgba(0,0,0,.03);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 900px at 10% 10%, rgba(31,111,235,.18), transparent 50%),
              radial-gradient(900px 700px at 90% 20%, rgba(245,158,11,.12), transparent 50%),
              linear-gradient(180deg, var(--bg), var(--bg));
  overflow-x: hidden;
}

/* subtle grid */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events:none;
  opacity:.55;
}

/* ---------- LAYOUT HELPERS ---------- */
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ---------- CARD ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
}

.card-pad { padding: 22px; }

/* ---------- BUTTONS ---------- */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  box-shadow: 0 10px 24px rgba(31,111,235,.22);
}
.btn-primary:hover { box-shadow: 0 16px 38px rgba(31,111,235,.30); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: rgba(31,111,235,.38); box-shadow: 0 10px 20px rgba(31,111,235,.12); transform: translateY(-1px); }

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #fb7185);
  color: #fff;
  box-shadow: 0 10px 24px rgba(239,68,68,.18);
}
.btn-danger:hover { box-shadow: 0 16px 38px rgba(239,68,68,.26); transform: translateY(-1px); }

/* ---------- INPUT ---------- */
.field { display:flex; flex-direction:column; gap: 8px; }
.label { font-size: 12px; letter-spacing: .2px; color: var(--muted); }

.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus {
  border-color: rgba(31,111,235,.55);
  box-shadow: 0 0 0 6px var(--focus);
}

/* ---------- BADGE ---------- */
.badge {
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- TOAST ---------- */
.toast-root {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  z-index: 9999;
}
.toast {
  min-width: 260px;
  max-width: 360px;
  display:flex; align-items:flex-start; gap:10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast-in { opacity: 1; transform: translateY(0); }
.toast-out { opacity: 0; transform: translateY(10px); }
.toast-dot { width:10px; height:10px; border-radius: 50%; margin-top: 4px; background: var(--primary); }
.toast-msg { font-size: 13px; color: var(--text); line-height: 1.35; flex:1; }
.toast-x {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 6px;
}
.toast-info .toast-dot { background: var(--primary); }
.toast-success .toast-dot { background: var(--success); }
.toast-warn .toast-dot { background: var(--warn); }
.toast-danger .toast-dot { background: var(--danger); }

/* ---------- MODAL ---------- */
.modal-root.hidden { display: none; }
.modal-root {
  position: fixed; inset: 0;
  display: grid;
  place-items: center;
  z-index: 9998;
}
.modal-backdrop {
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}
:root[data-theme="light"] .modal-backdrop { background: rgba(10,12,20,.40); }

.modal-card {
  position: relative;
  width: min(520px, calc(100% - 28px));
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.modal-head, .modal-foot { padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-title { font-weight: 800; letter-spacing: .2px; }
.modal-close {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.modal-close:hover { transform: translateY(-1px); border-color: rgba(31,111,235,.38); box-shadow: 0 10px 20px rgba(31,111,235,.12); }

.modal-body { padding: 0 16px 14px; color: var(--muted); line-height: 1.45; }
.modal-foot { justify-content: flex-end; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 520px) {
  .card-pad { padding: 18px; }
  .btn { width: 100%; }
  .row { flex-direction: column; align-items: stretch; }
}
body{
  margin:0;
  background:#0b0f14;
  color:#e6edf3;
  font-family:system-ui;
}

.layout{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:260px;
  background:#0f1620;
  border-right:1px solid #1d2a3a;
  display:flex;
  flex-direction:column;
}

.sidebar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
}

.menu a{
  display:block;
  padding:12px 16px;
  color:#9fb0c0;
  text-decoration:none;
}

.menu a:hover{
  background:#111c2b;
  color:#fff;
}

.content{
  flex:1;
  padding:32px;
  overflow:auto;
}

/* KPI */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:24px;
}

.kpi-card{
  background:#0f1620;
  border:1px solid #1d2a3a;
  border-radius:14px;
  padding:20px;
}
.leave-table {
  width: 100%;
  border-collapse: collapse;
}

.leave-table td, .leave-table th {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.reason-row.hidden {
  display: none;
}

.reason-box {
  background: rgba(15,22,32,.75);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px;
  color: #e6edf3;
  font-size: 14px;
  line-height: 1.5;
}

/* badge */
.badge.status.pending { background:#f59e0b; }
.badge.status.approved { background:#10b981; }
.badge.status.rejected { background:#ef4444; }


.kpi-card.warning{border-color:#f59e0b}
.kpi-card.success{border-color:#22c55e}
.note {
  background: rgba(255,255,255,.03);
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
}
.modal.hidden { display:none; }

.modal {
  position:fixed;
  inset:0;
  z-index:9999;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.modal-box{
  position:relative;
  max-width:420px;
  margin:12vh auto;
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}

.table tr{
  background:var(--panel);
  border-radius:14px;
}

.table td, .table th{
  padding:12px 14px;
}

.subrow td{
  background:rgba(255,255,255,.04);
  font-size:13px;
  color:var(--muted);
}
.desktop-only { display: table; }
.mobile-only { display: none; }

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

/* Leave Cards */
.leave-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.leave-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
}

.lc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.lc-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 6px;
}

.lc-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.lc-note.admin {
  border-top: 1px dashed var(--stroke);
  margin-top: 10px;
  padding-top: 8px;
}

.lc-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
/* ===== LEAVE MOBILE CARDS ===== */

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

.leave-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

/* Header */
.lc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.lc-user {
  font-weight: 700;
  font-size: 15px;
}

/* Status */
.lc-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.lc-status.pending { background: rgba(255,186,73,.15); color:#ffba49; }
.lc-status.approved { background: rgba(82,231,174,.18); color:#52e7ae; }
.lc-status.rejected { background: rgba(255,99,99,.18); color:#ff6363; }
.lc-status.cancelled { background: rgba(150,150,150,.18); color:#aaa; }

/* Grid */
.lc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.lc-grid div span {
  margin-right: 6px;
}

/* Notes */
.lc-note {
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 8px;
}

.lc-note.admin {
  border-left: 3px solid #5aa0ff;
}

/* Actions */
.lc-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.lc-actions .btn {
  flex: 1;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1 / -1}

.input{
  padding:12px;
  border-radius:12px;
  background:#0f1620;
  border:1px solid #1d2a3a;
  color:#e6edf3;
}

.actions{
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
}

.req{color:#f87171}

@media(max-width:768px){
  .form-grid{grid-template-columns:1fr}
}

.search-select {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--text);
}

.search-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  margin-top: 6px;
  display: none;
  z-index: 20;
}

.search-item {
  padding: 10px 12px;
  cursor: pointer;
}

.search-item:hover {
  background: rgba(255,255,255,.08);
}
/* === FORM GENEL === */
.form-group {
  background: linear-gradient(
    180deg,
    rgba(15,22,32,.9),
    rgba(11,15,20,.9)
  );
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 14px 14px;
  margin-bottom: 14px;
  position: relative;
}

/* LABEL */
.form-group label {
  display: block;
  font-size: 12px;
  color: rgba(230,237,243,.65);
  margin-bottom: 6px;
  letter-spacing: .02em;
}

/* INPUT / SELECT */
.form-group input,
.form-group select {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 12px 12px;
  color: #e6edf3;
  font-size: 14px;
}

/* FOCUS */
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59,130,246,.4);
}

/* ZORUNLU ALAN VURGUSU */
.form-group.required label::after {
  content: " *";
  color: #f87171;
}

/* BUTON */
.btn-primary {
  margin-top: 10px;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
}
 .custom-select {
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px;
}

.custom-select input {
  background: transparent;
  border: 0;
  padding: 10px 8px;
}
@media (max-width: 600px) {
  .form-group {
    padding: 14px;
  }

  .form-group input,
  .form-group select {
    font-size: 15px;
    padding: 14px 12px;
  }
}

/* ===== PAYROLL ===== */

.payroll-grid{
  display:grid;
  gap:14px;
}

.payroll-card{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--shadow);
}

.pc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:10px;
}

.pc-row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:14px;
}
.pc-row:last-child{border-bottom:none}

.pc-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

/* DESKTOP GRID */
@media (min-width: 900px){
  .payroll-grid{
    grid-template-columns: repeat(2,1fr);
  }
}
@media (min-width: 1200px){
  .payroll-grid{
    grid-template-columns: repeat(3,1fr);
  }
}
.settings-card{
  max-width:720px;
}

.setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid var(--stroke);
}

.setting-row:last-child{
  border-bottom:0;
}

.switch{
  position:relative;
  width:46px;
  height:26px;
}
.switch input{display:none}
.switch span{
  position:absolute;
  inset:0;
  background:#1d2a3a;
  border-radius:999px;
  cursor:pointer;
  transition:.2s;
}
.switch span::after{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:20px;height:20px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
}
.switch input:checked + span{
  background:#2ea043;
}
.switch input:checked + span::after{
  transform:translateX(20px);
}

.actions{
  margin-top:20px;
}

.mt{margin-top:16px}
/* FILTER BAR */
.filter-bar {
  margin-bottom: 16px;
}
.filter-grid {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:12px;
}
@media(max-width:700px){
  .filter-grid { grid-template-columns:1fr; }
}

/* AUDIT MOBILE */
.audit-cards {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.audit-card {
  background:#0f1620;
  border:1px solid #1d2a3a;
  border-radius:14px;
  padding:14px;
}
.ac-head {
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}
.ac-row {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:4px 0;
}

/* RESPONSIVE VISIBILITY */
.desktop-only { display:block }
.mobile-only  { display:none }

@media(max-width:800px){
  .desktop-only{ display:none }
  .mobile-only { display:block }
}

.audit-card{padding:18px}

.audit-filter{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin-bottom:16px;
}

.audit-filter label{
  font-size:12px;
  color:var(--muted);
}

.audit-item{
  border:1px solid var(--brd);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  background:rgba(255,255,255,.02);
}

.ai-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}

.ai-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  margin:4px 0;
}

.ai-time{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

.desktop-only{display:block}
.mobile-only{display:none}

@media(max-width:768px){
  .desktop-only{display:none}
  .mobile-only{display:block}
}

.audit-filter{
  display:grid;
  grid-template-columns: 160px 160px 1fr 200px;
  gap:12px;
  margin-bottom:16px;
  align-items:end;
}

/* Label */
.audit-filter .field label{
  font-size:12px;
  color:rgba(230,237,243,.6);
  margin-bottom:4px;
  display:block;
}

/* Inputs */
.audit-filter input{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(157,180,200,.25);
  background:rgba(10,17,26,.8);
  color:#e6edf3;
  padding:0 12px;
}

.audit-filter input:focus{
  outline:none;
  border-color:#3da9ff;
  box-shadow:0 0 0 2px rgba(61,169,255,.25);
}

/* Action Buttons */
.audit-filter .actions{
  display:flex;
  gap:8px;
  align-items:flex-end;
}

/* Responsive */
@media(max-width:900px){
  .audit-filter{
    grid-template-columns: 1fr 1fr;
  }

  .audit-filter .field:nth-child(3){
    grid-column:1 / -1;
  }

  .audit-filter .actions{
    grid-column:1 / -1;
  }
}

@media(max-width:500px){
  .audit-filter{
    grid-template-columns:1fr;
  }
}
.pmr-container{padding:16px}
.pmr-controls{display:flex;gap:8px;flex-wrap:wrap}
.pmr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pmr-card{background:var(--card-bg);border-radius:12px;padding:12px}
@media(max-width:600px){
  .pmr-cards{grid-template-columns:1fr}
}