/* ============================================
YAKALAMAC UI KIT - CSS STYLESHEET

Description : Core stylesheet for Yakalamac UI Kit.
Author      : Alper Uyanık
File Type   : CSS
Version     : 1.0.0
Created On  : 17.09.2025
============================================ */



:root {
  --yakalamac-primary: #00B8C0;
  --yakalamac-secondary: #00324E;
  --yakalamac-orange: #FC9817;
  --yakalamac-yellow: #FCF617;
  --yakalamac-gray: #3F3F3F;
  --yakalamac-white: #ffffff;
  --yakalamac-black: #000000;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ========== TEXT COLORS ========== */
.text-yakalamac-primary { color: var(--yakalamac-primary) !important; }
.text-yakalamac-secondary { color: var(--yakalamac-secondary) !important; }
.text-yakalamac-orange { color: var(--yakalamac-orange) !important; }
.text-yakalamac-yellow { color: var(--yakalamac-yellow) !important; }
.text-yakalamac-gray { color: var(--yakalamac-gray) !important; }
.text-yakalamac-white { color: var(--yakalamac-white) !important; }
.text-yakalamac-black { color: var(--yakalamac-black) !important; }

/* ========== BACKGROUND COLORS ========== */
.bg-yakalamac-primary { background-color: var(--yakalamac-primary) !important; }
.bg-yakalamac-secondary { background-color: var(--yakalamac-secondary) !important; }
.bg-yakalamac-orange { background-color: var(--yakalamac-orange) !important; }
.bg-yakalamac-yellow { background-color: var(--yakalamac-yellow) !important; }
.bg-yakalamac-gray { background-color: var(--yakalamac-gray) !important; }
.bg-yakalamac-white { background-color: var(--yakalamac-white) !important; }
.bg-yakalamac-black { background-color: var(--yakalamac-black) !important; }

/* ========== BORDER COLORS ========== */
.border-yakalamac-primary { border: 1px solid var(--yakalamac-primary) !important; }
.border-yakalamac-secondary { border: 1px solid var(--yakalamac-secondary) !important; }
.border-yakalamac-orange { border: 1px solid var(--yakalamac-orange) !important; }
.border-yakalamac-yellow { border: 1px solid var(--yakalamac-yellow) !important; }
.border-yakalamac-gray { border: 1px solid var(--yakalamac-gray) !important; }
.border-yakalamac-white { border: 1px solid var(--yakalamac-white) !important; }
.border-yakalamac-black { border: 1px solid var(--yakalamac-black) !important; }

/* ========== OUTLINES ========== */
.outline-yakalamac-primary { outline: 2px solid var(--yakalamac-primary) !important; }
.outline-yakalamac-secondary { outline: 2px solid var(--yakalamac-secondary) !important; }
.outline-yakalamac-orange { outline: 2px solid var(--yakalamac-orange) !important; }
.outline-yakalamac-yellow { outline: 2px solid var(--yakalamac-yellow) !important; }
.outline-yakalamac-gray { outline: 2px solid var(--yakalamac-gray) !important; }
.outline-yakalamac-white { outline: 2px solid var(--yakalamac-white) !important; }
.outline-yakalamac-black { outline: 2px solid var(--yakalamac-black) !important; }

/* ================= LINKS ================= */
.link-yakalamac-primary {
  color: var(--yakalamac-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link-yakalamac-primary:hover {
  color: #0099a0;
  text-decoration: underline;
}

/* ================= BADGES ================= */
.badge-yakalamac {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.375rem;
}
.badge-yakalamac-primary { background: var(--yakalamac-primary); color: var(--yakalamac-white); }
.badge-yakalamac-secondary { background: var(--yakalamac-secondary); color: var(--yakalamac-white); }
.badge-yakalamac-orange { background: var(--yakalamac-orange); color: var(--yakalamac-white); }
.badge-yakalamac-yellow { background: var(--yakalamac-yellow); color: var(--yakalamac-black); }
.badge-yakalamac-gray { background: var(--yakalamac-gray); color: var(--yakalamac-white); }

/* ================= ALERTS ================= */
.alert-yakalamac {
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}
.alert-yakalamac-primary { background: rgba(0,184,192,0.1); border-left: 4px solid var(--yakalamac-primary); color: var(--yakalamac-primary); }
.alert-yakalamac-secondary { background: rgba(0,50,78,0.1); border-left: 4px solid var(--yakalamac-secondary); color: var(--yakalamac-secondary); }
.alert-yakalamac-orange { background: rgba(252,152,23,0.1); border-left: 4px solid var(--yakalamac-orange); color: var(--yakalamac-orange); }
.alert-yakalamac-yellow { background: rgba(252,246,23,0.1); border-left: 4px solid var(--yakalamac-yellow); color: var(--yakalamac-gray); }
.alert-yakalamac-gray { background: rgba(63,63,63,0.1); border-left: 4px solid var(--yakalamac-gray); color: var(--yakalamac-gray); }

/* ================= SHADOWS ================= */
.shadow-yakalamac-primary { box-shadow: 0 4px 6px rgba(0,184,192,0.3) !important; }
.shadow-yakalamac-secondary { box-shadow: 0 4px 6px rgba(0,50,78,0.3) !important; }
.shadow-yakalamac-orange { box-shadow: 0 4px 6px rgba(252,152,23,0.3) !important; }
.shadow-yakalamac-yellow { box-shadow: 0 4px 6px rgba(252,246,23,0.3) !important; }
.shadow-yakalamac-gray { box-shadow: 0 4px 6px rgba(63,63,63,0.3) !important; }

/* ================= GRADIENTS ================= */
.bg-yakalamac-gradient-primary {
  background: linear-gradient(135deg, var(--yakalamac-primary), var(--yakalamac-secondary));
}
.bg-yakalamac-gradient-orange {
  background: linear-gradient(135deg, var(--yakalamac-orange), var(--yakalamac-yellow));
}

/* ================= FORM FOCUS ================= */
input:focus, textarea:focus, select:focus {
  border-color: var(--yakalamac-primary) !important;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0,184,192,0.25) !important;
}

/* ================= PROGRESS ================= */
.progress-yakalamac {
  background: #e9ecef;
  border-radius: 0.375rem;
  overflow: hidden;
  height: 1rem;
}
.progress-yakalamac-bar {
  height: 100%;
  transition: width 0.3s ease;
}
.progress-yakalamac-primary { background: var(--yakalamac-primary); }
.progress-yakalamac-secondary { background: var(--yakalamac-secondary); }
.progress-yakalamac-orange { background: var(--yakalamac-orange); }
.progress-yakalamac-yellow { background: var(--yakalamac-yellow); }
.progress-yakalamac-gray { background: var(--yakalamac-gray); }

/* ================= TABLES ================= */
.table-yakalamac thead {
  background: var(--yakalamac-secondary);
  color: var(--yakalamac-white);
}
.table-yakalamac tbody tr:hover {
  background: rgba(0,184,192,0.1);
}

/* ================= ICONS ================= */
.icon-yakalamac-primary { fill: var(--yakalamac-primary); stroke: var(--yakalamac-primary); }
.icon-yakalamac-secondary { fill: var(--yakalamac-secondary); stroke: var(--yakalamac-secondary); }
.icon-yakalamac-orange { fill: var(--yakalamac-orange); stroke: var(--yakalamac-orange); }
.icon-yakalamac-yellow { fill: var(--yakalamac-yellow); stroke: var(--yakalamac-yellow); }
.icon-yakalamac-gray { fill: var(--yakalamac-gray); stroke: var(--yakalamac-gray); }

/* Hover renk değiştiren icon */
.icon-hover-yakalamac-orange:hover { fill: var(--yakalamac-orange); stroke: var(--yakalamac-orange); }
.icon-hover-yakalamac-primary:hover { fill: var(--yakalamac-primary); stroke: var(--yakalamac-primary); }

/* ========== BASE BUTTON STYLE ========== */
.btn-yakalamac {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
}

/* ========== SOLID BUTTONS ========== */
.btn-yakalamac-primary {
  background-color: var(--yakalamac-primary);
  color: var(--yakalamac-white);
}
.btn-yakalamac-primary:hover { background-color: #0099a0; }
.btn-yakalamac-primary:active { background-color: #007b85; }
.btn-yakalamac-primary:disabled { background-color: #99e1e4; cursor: not-allowed; }

.btn-yakalamac-secondary {
  background-color: var(--yakalamac-secondary);
  color: var(--yakalamac-white);
}
.btn-yakalamac-secondary:hover { background-color: #00263a; }
.btn-yakalamac-secondary:active { background-color: #001a29; }
.btn-yakalamac-secondary:disabled { background-color: #7a8c99; cursor: not-allowed; }

.btn-yakalamac-orange {
  background-color: var(--yakalamac-orange);
  color: var(--yakalamac-white);
}
.btn-yakalamac-orange:hover { background-color: #e68510; }
.btn-yakalamac-orange:active { background-color: #cc730d; }
.btn-yakalamac-orange:disabled { background-color: #f3b768; cursor: not-allowed; }

.btn-yakalamac-yellow {
  background-color: var(--yakalamac-yellow);
  color: var(--yakalamac-black);
}
.btn-yakalamac-yellow:hover { background-color: #e5e010; }
.btn-yakalamac-yellow:active { background-color: #ccc90d; }
.btn-yakalamac-yellow:disabled { background-color: #f8f77f; cursor: not-allowed; }

.btn-yakalamac-gray {
  background-color: var(--yakalamac-gray);
  color: var(--yakalamac-white);
}
.btn-yakalamac-gray:hover { background-color: #2d2d2d; }
.btn-yakalamac-gray:active { background-color: #1a1a1a; }
.btn-yakalamac-gray:disabled { background-color: #a1a1a1; cursor: not-allowed; }

/* ========== OUTLINED BUTTONS ========== */
.btn-yakalamac-outline-primary {
  background-color: transparent;
  color: var(--yakalamac-primary);
  border: 2px solid var(--yakalamac-primary);
}
.btn-yakalamac-outline-primary:hover {
  background-color: var(--yakalamac-primary);
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-primary:active {
  background-color: #007b85;
  border-color: #007b85;
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-primary:disabled {
  border-color: #99e1e4;
  color: #99e1e4;
  cursor: not-allowed;
}

.btn-yakalamac-outline-secondary {
  background-color: transparent;
  color: var(--yakalamac-secondary);
  border: 2px solid var(--yakalamac-secondary);
}
.btn-yakalamac-outline-secondary:hover {
  background-color: var(--yakalamac-secondary);
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-secondary:active {
  background-color: #001a29;
  border-color: #001a29;
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-secondary:disabled {
  border-color: #7a8c99;
  color: #7a8c99;
  cursor: not-allowed;
}

.btn-yakalamac-outline-orange {
  background-color: transparent;
  color: var(--yakalamac-orange);
  border: 2px solid var(--yakalamac-orange);
}
.btn-yakalamac-outline-orange:hover {
  background-color: var(--yakalamac-orange);
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-orange:active {
  background-color: #cc730d;
  border-color: #cc730d;
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-orange:disabled {
  border-color: #f3b768;
  color: #f3b768;
  cursor: not-allowed;
}

.btn-yakalamac-outline-yellow {
  background-color: transparent;
  color: var(--yakalamac-yellow);
  border: 2px solid var(--yakalamac-yellow);
}
.btn-yakalamac-outline-yellow:hover {
  background-color: var(--yakalamac-yellow);
  color: var(--yakalamac-black);
}
.btn-yakalamac-outline-yellow:active {
  background-color: #ccc90d;
  border-color: #ccc90d;
  color: var(--yakalamac-black);
}
.btn-yakalamac-outline-yellow:disabled {
  border-color: #f8f77f;
  color: #f8f77f;
  cursor: not-allowed;
}

.btn-yakalamac-outline-gray {
  background-color: transparent;
  color: var(--yakalamac-gray);
  border: 2px solid var(--yakalamac-gray);
}
.btn-yakalamac-outline-gray:hover {
  background-color: var(--yakalamac-gray);
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-gray:active {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: var(--yakalamac-white);
}
.btn-yakalamac-outline-gray:disabled {
  border-color: #a1a1a1;
  color: #a1a1a1;
  cursor: not-allowed;
}

/* ========== CUSTOMIZED DATATABLE ========== */

.custom-datatable .table thead th {
    background-color: rgba(0, 183, 192, 0.05);
    color: #343a40;
    font-weight: 600;
    border-bottom: 2px solid rgba(0, 183, 192, 0.2) !important;
}

.custom-datatable .table tbody tr:hover {
    cursor: pointer;
    background-color: rgba(0, 183, 192, 0.05) !important; 
}

.custom-datatable .table tbody tr td:first-child {
    transition: border-left 0.2s ease-in-out;
    border-left: 3px solid transparent;
}

.custom-datatable .table tbody tr:hover td:first-child {
    border-left: 3px solid var(--yakalamac-orange);
}

.custom-datatable .dataTables_paginate .paginate_button.current,
.custom-datatable .dataTables_paginate .paginate_button.current:hover {
    background: var(--yakalamac-primary) !important;
    color: white !important;
    border-color: var(--yakalamac-primary) !important;
    border-radius: 0.25rem;
    box-shadow: none;
}

.custom-datatable .dataTables_paginate .paginate_button:hover {
    background: rgba(0, 183, 192, 0.1);
    color: var(--yakalamac-primary) !important;
    border-color: transparent !important;
    box-shadow: none;
}

.custom-datatable .dataTables_paginate .paginate_button {
    border-radius: 0.25rem;
}

/* ========== CUSTOMIZED TOOLTIP ========== */

.tooltip {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: #f8f9fa;
  color: #212529;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 400;
  border: 1px solid #dee2e6;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #f8f9fa;
}