@import "tailwindcss";

/* Tailwind v4 source detection */
@source "../../../app/views/**/*.erb";
@source "../../../app/helpers/**/*.rb";
@source "../../../app/javascript/**/*.js";
@source "../../../app/controllers/**/*.rb";

@theme {
  /* LawIs Theme Variables */
  --color-sidebar-bg: #0F1117;
  --color-sidebar-hover: #1a1d26;
  --color-sidebar-active: #1e2230;
  --color-sidebar-text: #9CA3AF;
  --color-sidebar-text-active: #F9FAFB;
  --color-page-bg: #F8F9FB;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-accent-from: #3B82F6;
  --color-accent-to: #7C3AED;
  --color-accent-mid: #6366F1;
  --color-topbar-bg: #ffffff;
  --color-surface: #ffffff;
  --color-border-main: #E5E7EB;
  --color-border-light: #F3F4F6;

  /* Fonte global: Inter */
  --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-mono: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

  --sidebar-w: 220px;
  --sidebar-collapsed: 56px;
  --topbar-h: 52px;

  /* Toast animations */
  --animate-slide-in: slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-shrink-bar: shrink-bar 4s linear forwards;
}

/* Component Styles from New Frontend */
@layer components {
  /* Dot base */
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 99px;
  }
  .dot-green  { background: #10B981; }
  .dot-amber  { background: #F59E0B; }
  .dot-orange { background: #F97316; }
  .dot-blue   { background: #3B82F6; }
  .dot-purple { background: #8B5CF6; }
  .dot-gray   { background: #9CA3AF; }
  .dot-red    { background: #EF4444; }

  .grad-text {
    background: linear-gradient(135deg, var(--color-accent-from), var(--color-accent-to));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    border: none;
  }

  .btn-primary-new {
    background: linear-gradient(135deg, var(--color-accent-from), var(--color-accent-to));
    color: white;
    box-shadow: 0 2px 8px rgba(99,102,241,.35);
  }
  .btn-primary-new:hover {
    opacity: .9;
    transform: translateY(-1px);
  }

  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-main) !important;
    box-shadow: var(--shadow-sm);
  }
  .btn-secondary:hover {
    background: var(--color-border-light);
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
  }
  .btn-ghost:hover {
    background: var(--color-border-light);
    color: var(--color-text-primary);
  }

  .sidebar-nav-item-new {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-sidebar-text);
    font-size: 13px;
    font-weight: 450;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    position: relative;
  }
  .sidebar-nav-item-new:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
  }
  .sidebar-nav-item-new.active {
    background: var(--color-sidebar-active);
    color: var(--color-sidebar-text-active);
  }
  .sidebar-nav-item-new.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom, var(--color-accent-from), var(--color-accent-to));
  }

  /* Sidebar collapsible group */
  details.group\/drive > summary::-webkit-details-marker { display: none; }
  details.group\/drive > summary { list-style: none; }

  /* Metric cards */
  .metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    transition: all .15s;
  }
  .metric-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
  }
  .metric-value {
    font-size: 28px;
    font-weight: 700;
    margin: 6px 0 4px;
    color: var(--color-text-primary);
    line-height: 1;
  }
  .metric-link {
    font-size: 12px;
    color: var(--color-accent-mid);
    cursor: pointer;
    text-decoration: none;
  }
  .metric-link:hover {
    text-decoration: underline;
  }

  /* Badge base */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
  }
  .badge-blue   { background:#EFF6FF; color:#1D4ED8; }
  .badge-green  { background:#F0FDF4; color:#15803D; }
  .badge-amber  { background:#FFFBEB; color:#B45309; }
  .badge-red    { background:#FEF2F2; color:#B91C1C; }
  .badge-purple { background:#F5F3FF; color:#6D28D9; }
  .badge-gray   { background:#F3F4F6; color:#374151; }
  .badge-orange { background:#FFF7ED; color:#C2410C; }

  /* Page headers */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-title {
    font-size: 20px;
    font-weight: 650;
    color: var(--color-text-primary);
  }
  .page-subtitle {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  /* Dashboard cards */
  .dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-light);
  }
  .dashboard-card-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--color-text-secondary);
  }
  .dashboard-card-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-accent-mid);
    text-decoration: none;
  }
  .dashboard-card-link:hover { text-decoration: underline; }
  .dashboard-list-item {
    display: flex;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-light);
    align-items: flex-start;
  }
  .dashboard-list-item:hover { background: var(--color-bg-hover); }
  .dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 0;
  }

  /* Table styles */
  .table-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-main);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }
  table thead tr {
    background: #FAFAFA;
    border-bottom: 1px solid var(--color-border-main);
  }
  table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
  }
  table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background .1s;
  }
  table tbody td {
    padding: 11px 14px;
    color: var(--color-text-primary);
    vertical-align: middle;
    font-size: 13px;
  }

  /* Filter row */
  .filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .filter-select {
    padding: 7px 10px;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
    background: white;
    cursor: pointer;
    color: var(--color-text-primary);
  }

  /* Native select estilizado — para campos com JS dinâmico (team-responsible, crm-form) */
  .select-native {
    padding: 7px 32px 7px 12px;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    color: var(--color-text-primary);
  }
  .select-native:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }
  .search-bar {
    display: flex;
    align-items: center;
    background: var(--color-border-light);
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    gap: 8px;
  }

  /* Kanban / CRM */
  .kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
  }
  .kanban-col {
    flex-shrink: 0;
    width: 256px;
    display: flex;
    flex-direction: column;
  }
  .kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
  }
  .kanban-col-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .kanban-col-count {
    font-size: 11px;
    background: var(--color-border-light);
    color: var(--color-text-muted);
    border-radius: 99px;
    padding: 1px 8px;
  }
  .kanban-cards {
    background: #F3F4F6;
    border-radius: var(--radius-md);
    padding: 8px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .kanban-card {
    background: white;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: grab;
    box-shadow: var(--shadow-sm);
    transition: all .15s;
  }
  .kanban-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .kanban-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    line-height: 1.35;
  }
  .kanban-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .kanban-card-tag {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  /* Abas / Tabs */
  .tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all .15s;
    border-bottom: 2px solid transparent;
    text-decoration: none;
  }
  .tab:hover {
    color: var(--color-text-primary);
    background: var(--color-border-light);
  }
  .tab.active {
    color: var(--color-accent-mid);
    border-bottom-color: var(--color-accent-mid);
    background: transparent !important;
  }
}