@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Inter', sans-serif;
}
:root {
    --max-width: 1100px;
    --border-radius: 12px;
    --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono',
        'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
        'Courier New', monospace;

    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;

    --primary-glow: conic-gradient(
        from 180deg at 50% 50%,
        #16abff33 0deg,
        #0885ff33 55deg,
        #54d6ff33 120deg,
        #0071ff33 160deg,
        transparent 360deg
    );
    --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

    --tile-start-rgb: 239, 245, 249;
    --tile-end-rgb: 228, 232, 233;
    --tile-border: conic-gradient(
        #00000080,
        #00000040,
        #00000030,
        #00000020,
        #00000010,
        #00000010,
        #00000080
    );

    --callout-rgb: 238, 240, 241;
    --callout-border-rgb: 172, 175, 176;
    --card-rgb: 180, 185, 188;
    --card-border-rgb: 131, 134, 135;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;

        --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
        --secondary-glow: linear-gradient(
            to bottom right,
            rgba(1, 65, 255, 0),
            rgba(1, 65, 255, 0),
            rgba(1, 65, 255, 0.3)
        );

        --tile-start-rgb: 2, 13, 46;
        --tile-end-rgb: 2, 5, 19;
        --tile-border: conic-gradient(
            #ffffff80,
            #ffffff40,
            #ffffff30,
            #ffffff20,
            #ffffff10,
            #ffffff10,
            #ffffff80
        );

        --callout-rgb: 20, 20, 20;
        --callout-border-rgb: 108, 108, 108;
        --card-rgb: 100, 100, 100;
        --card-border-rgb: 200, 200, 200;
    }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    color: rgb(var(--foreground-rgb));
    background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
        rgb(var(--background-start-rgb));
}

a {
    color: inherit;
    text-decoration: none;
}
.d-flex {
    display: flex !important;
}
.justify-content-end {
    justify-content: flex-end;
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

.custom-error-row {
    background-color: rgb(206 242 18 / 30%) !important;
    transition: background-color 0.3s ease;
}

.custom-error-row:hover>td {
    background-color: rgb(206 242 18 / 17%) !important;
}

.custom-error-row td.ant-table-column-sort {
    background-color: rgb(206 242 18 / 17%) !important;
}

.site-visit-modern-card {
  background-color: #f9f9f9; /* Off-white background */
  border: 1px solid #d9d9d9; /* Light grey border (same as Ant Design) */
  padding: 24px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  margin-bottom: 20px;
}

.section-header {
  margin-bottom: 12px;
}

.section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937; /* dark gray */
}

.section-description .ant-descriptions-item-label {
  min-width: 40%;
  width: 20%;
  padding-right: 10px;
  font-weight: 500;
  color: #6b7280; /* tailwind gray-500 */
}

.section-description .ant-descriptions-item-content {
  color: #111827; /* tailwind gray-900 */
}

.blocked-switch.ant-switch-checked {
  background-color: #ff4d4f !important;
}

.blocked-switch.ant-switch-checked:hover:not(.ant-switch-disabled) {
  background-color: #ff7875 !important;
}

/* ─── Duplicate Lead Modal ──────────────────────────────────────────────── */

.duplicate-lead-modal .ant-modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
  margin-bottom: 0;
}

.duplicate-lead-modal__body {
  padding: 16px 0 4px;
}

.duplicate-lead-modal__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.duplicate-lead-modal__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.duplicate-lead-modal__label {
  flex: 0 0 130px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  padding-top: 2px;
}

.duplicate-lead-modal__value {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  word-break: break-word;
}

.duplicate-lead-modal__remark {
  color: #4b5563;
  font-weight: 400;
  font-style: italic;
}

.duplicate-lead-modal .ant-modal-footer {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.import-file-input {
  border: 1px solid lightgray;
  border-radius: 5px;
  padding: 7px;
  width: 100%;
}

.import-file-input:focus,
.import-file-input:hover {
  border: 1px solid #269454;
}

.custom-collapse .ant-collapse-item {
  margin-bottom: 8px;
}

.custom-collapse .ant-collapse-content {
  padding: 8px 0 !important;
}

.ant-collapse>.ant-collapse-item>.ant-collapse-header {
  padding: 10px 16px !important;
}

.custom-scrollbar {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 6px;
}

/* Chrome, Edge, Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  /* 👈 thin */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}