/* =========================================================
   KRM YACHT SAAS BILESENLERI v2.1
   Kaynak: krm-design-system.html, birebir kopya.

   Bu dosya projeye ozel kural ICERMEZ. Diger KRM projelerine
   oldugu gibi kopyalanir. Degisiklik once tasarim sisteminde yapilir.

   Kabuk (.sb/.tb/.pagehead) bilerek disarida: o uygulamaya ozel
   oldugu icin krm-shell.css'te yasiyor.
   ========================================================= */

/* ---- Butonlar, form alanlari, rozetler, uyarilar (satir 152-190) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--krm-font);font-size:var(--fs-body);font-weight:600;height:var(--h-btn);padding:0 var(--sp-4);border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:focus-visible{outline:2px solid var(--krm-navy);outline-offset:2px}
.btn-primary{background:var(--krm-navy);color:#fff}
.btn-primary:hover{background:var(--krm-navy-dark)}
.btn-secondary{background:#fff;color:var(--krm-navy);border-color:var(--krm-grey-300)}
.btn-secondary:hover{border-color:var(--krm-navy);background:var(--krm-navy-tint)}
.btn-ghost{background:none;border:0;color:var(--krm-navy);font-weight:600;cursor:pointer;font-size:var(--fs-body);font-family:var(--krm-font);height:var(--h-btn);padding:0 var(--sp-2);border-radius:var(--r-btn)}
.btn-ghost:hover{background:var(--krm-navy-tint)}
.btn-danger{background:var(--krm-error);color:#fff}
.btn-danger:hover{background:#8F1E18}
.btn[disabled]{background:var(--krm-grey-200);color:var(--krm-grey-400);cursor:not-allowed;border-color:transparent}
.btn-sm{height:var(--h-btn-sm);padding:0 var(--sp-3);font-size:13px}
.btn-icon{width:var(--h-btn);padding:0}

.field{margin-bottom:var(--sp-4);max-width:420px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--krm-ink);margin-bottom:6px}
.field .req{color:var(--krm-error)}
.field input,.field select,.field textarea{width:100%;font-family:var(--krm-font);font-size:var(--fs-body);color:var(--krm-ink);background:#fff;border:1px solid var(--krm-grey-300);border-radius:var(--r-input);height:var(--h-input);padding:0 12px}
.field textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--krm-grey-400)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--krm-navy);outline-offset:1px;border-color:var(--krm-navy)}
.field .hint{font-size:12px;color:var(--krm-grey-600);margin-top:4px}
.field.error input{border-color:var(--krm-error);background:var(--krm-error-tint)}
.field.error .msg{color:var(--krm-error);font-size:12px;font-weight:600;margin-top:4px}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;border-radius:var(--r-pill);padding:2px 10px;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.st-planned{background:var(--krm-navy-tint);color:var(--krm-navy)}
.st-progress{background:var(--krm-turquoise-tint);color:#0E6C86}
.st-hold{background:var(--krm-warning-tint);color:var(--krm-warning)}
.st-blocked{background:var(--krm-error-tint);color:var(--krm-error)}
.st-done{background:var(--krm-success-tint);color:var(--krm-success)}
.st-cancel{background:var(--krm-grey-200);color:var(--krm-grey-600)}

.alert{display:flex;gap:10px;border-radius:var(--r-input);padding:12px 16px;font-size:var(--fs-body);margin-bottom:var(--sp-3);border:1px solid;max-width:640px}
.alert-info{background:var(--krm-info-tint);border-color:var(--krm-navy);color:var(--krm-navy)}
.alert-success{background:var(--krm-success-tint);border-color:var(--krm-success);color:var(--krm-success)}
.alert-warning{background:var(--krm-warning-tint);border-color:var(--krm-warning);color:var(--krm-warning)}
.alert-error{background:var(--krm-error-tint);border-color:var(--krm-error);color:var(--krm-error)}

/* ---- Veri tablosu, toplu islem cubugu, filtre cipleri (satir 221-238) ---- */
.data{width:100%;border-collapse:collapse;font-size:var(--fs-body);background:#fff;border:1px solid var(--krm-grey-300);border-radius:var(--r-card);overflow:hidden}
.datawrap{overflow-x:auto;border-radius:var(--r-card);margin-bottom:var(--sp-3)}
.data th{background:var(--krm-grey-50);color:var(--krm-grey-600);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;text-align:left;padding:0 12px;height:40px;border-bottom:2px solid var(--krm-grey-300);white-space:nowrap}
.data th.sort{color:var(--krm-navy);cursor:pointer}
.data td{padding:0 12px;height:var(--h-row);border-bottom:1px solid var(--krm-grey-200);vertical-align:middle}
.data tr:last-child td{border-bottom:0}
.data tbody tr:hover td{background:var(--app-row-hover)}
.data td.num,.data th.num{text-align:right;font-variant-numeric:tabular-nums}
.data a{color:var(--krm-navy);font-weight:600;text-decoration:none}
.data a:hover{text-decoration:underline}
.bulkbar{display:none;align-items:center;gap:var(--sp-3);background:var(--krm-navy);color:#fff;border-radius:var(--r-input);padding:8px 14px;font-size:13px;margin-bottom:var(--sp-2)}
.bulkbar.show{display:flex}
.bulkbar button{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:4px;padding:5px 12px;font-family:var(--krm-font);font-size:12.5px;cursor:pointer}
.bulkbar button:hover{background:rgba(255,255,255,.25)}
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--krm-grey-300);background:#fff;border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:var(--krm-font);color:var(--krm-ink)}
.fchip:hover{border-color:var(--krm-navy)}
.fchip.on{background:var(--krm-navy);border-color:var(--krm-navy);color:#fff}

/* ---- Toast / modal / drawer (satir 241-258) ---- */
#toasts{position:fixed;top:16px;right:16px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-lg);border-left:4px solid var(--krm-navy);padding:12px 40px 12px 14px;font-size:13.5px;position:relative;animation:slidein var(--t-base) var(--ease)}
.toast b{display:block;font-size:14px}
.toast.success{border-left-color:var(--krm-success)}
.toast.error{border-left-color:var(--krm-error)}
.toast .x{position:absolute;top:8px;right:8px;border:0;background:none;cursor:pointer;color:var(--krm-grey-400);font-size:16px;line-height:1}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.backdrop{position:fixed;inset:0;background:rgba(5,50,110,.55);z-index:var(--z-backdrop);display:none}
.backdrop.show{display:block}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(480px,92vw);background:#fff;border-radius:var(--r-modal);box-shadow:var(--sh-lg);z-index:var(--z-modal);display:none}
.modal.show{display:block}
.modal .mh{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--krm-grey-300);font-size:var(--fs-lg);font-weight:700;color:var(--krm-ink)}
.modal .mb{padding:var(--sp-5);font-size:var(--fs-body);color:var(--krm-grey-600)}
.modal .mf{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--krm-grey-300);display:flex;justify-content:flex-end;gap:var(--sp-2)}
/* SAPMA - tasarim sistemi hatasi duzeltmesi (2026-08-19)
   Token olcegi drawer'i 1030, backdrop'u 1040 veriyor. Bu siralama modal
   icin dogru (backdrop 1040 < modal 1050) ama drawer + backdrop birlikte
   kullanildiginda perde drawer'in USTUNDE kaliyordu: ekran tamamen
   maviye boyaniyor, drawer icindeki alanlara tiklanamiyor ve her tiklama
   perdeye gidip drawer'i kapatiyordu.
   Tasarim sisteminin kendi demosunda da ayni hata var (openOverlay()
   drawer icin de backdrop aciyor).
   Drawer perdenin bir ustune alindi, modalin (1050) altinda kaldi. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);background:#fff;box-shadow:var(--sh-lg);z-index:calc(var(--z-backdrop) + 1);transform:translateX(105%);transition:transform var(--t-base) var(--ease);display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer .dh{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--krm-grey-300);display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:var(--fs-lg)}
.drawer .db{padding:var(--sp-5);overflow:auto;flex:1}

/* ---- Skeleton / bos durum (satir 261-265) ---- */
.skel{background:linear-gradient(90deg,var(--krm-grey-200) 25%,var(--krm-grey-100) 50%,var(--krm-grey-200) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:4px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{border:1px dashed var(--krm-grey-300);border-radius:var(--r-card);background:#fff;padding:var(--sp-7);text-align:center;max-width:520px}
.empty h4{margin:0 0 6px;font-size:var(--fs-lg)}
.empty p{color:var(--krm-grey-600);font-size:var(--fs-body);margin:0 0 var(--sp-4)}

/* ---- KPI kartlari (satir 268-273) ---- */
.kpi{background:#fff;border:1px solid var(--krm-grey-300);border-radius:var(--r-card);padding:var(--sp-4) var(--sp-5);min-width:180px}
.kpi .lbl{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--krm-grey-600);font-weight:600}
.kpi .num{font-size:29px;font-weight:700;color:var(--krm-ink);margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12px;font-weight:600;margin-top:2px}
.kpi .delta.up{color:var(--krm-success)}
.kpi .delta.down{color:var(--krm-error)}

/* ---- Sekmeler (satir 275-278) ---- */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--krm-grey-300);width:100%}
.tabs button{font-family:var(--krm-font);font-size:var(--fs-body);font-weight:600;background:none;border:0;padding:9px 14px;cursor:pointer;color:var(--krm-grey-600);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs button[aria-selected="true"]{color:var(--krm-navy);border-bottom-color:var(--krm-navy)}
.tabs button:focus-visible{outline:2px solid var(--krm-navy);outline-offset:-2px}

/* ---- Uygulama govdesi ve erisilebilirlik ---- */
body{font-family:var(--krm-font);font-size:var(--fs-body);line-height:1.5;color:var(--krm-ink);background:var(--app-content-bg)}
*:focus-visible{outline:2px solid var(--krm-navy);outline-offset:2px}
.krm-skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--krm-navy);color:#fff;padding:10px 18px;font-size:16px;text-decoration:none}
.krm-skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}