/* ===================== Frilar Helpdesk 2.0 — Design System ===================== */
:root{
  --frc-bg: #f6f8fb;
  --frc-surface: #ffffff;
  --frc-border: #e6eaf0;
  --frc-text: #0f172a;
  --frc-muted: #64748b;
  --frc-primary: #0a3d62;
  --frc-primary-dark: #072a44;
  --frc-accent: #0ea5e9;
  --frc-danger: #ef4444;
  --frc-success: #16a34a;
  --frc-radius: 14px;
  --frc-radius-sm: 10px;
  --frc-shadow: 0 4px 16px rgba(15,23,42,.06);
  --frc-shadow-lg: 0 10px 30px rgba(15,23,42,.10);
}

.frc-portal, .frc-auth-wrap { color: var(--frc-text); font-size: 15px; line-height: 1.5; }
.frc-portal *, .frc-auth-wrap * { box-sizing: border-box; }
.frc-portal { background: var(--frc-bg); padding: 18px; border-radius: var(--frc-radius); }

/* ---------- Cards genéricos ---------- */
.frc-card{ background: var(--frc-surface); border: 1px solid var(--frc-border); border-radius: var(--frc-radius); box-shadow: var(--frc-shadow); padding: 18px 20px; margin-bottom: 16px; }
.frc-card h3{ margin: 0 0 14px; font-size: 17px; }
.frc-card h4{ margin: 0 0 12px; font-size: 14px; color: var(--frc-muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Cabeçalho / navegação ---------- */
.frc-portal-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; background: var(--frc-surface); border:1px solid var(--frc-border); border-radius: var(--frc-radius); padding: 14px 18px; margin-bottom: 16px; box-shadow: var(--frc-shadow); }
.frc-portal-head .brand{ display:flex; gap:10px; align-items:center; }
.frc-portal-head img{ height:36px; width:auto; border-radius:8px; }
.frc-portal-head .nm{ font-weight:700; }
.frc-portal-head .site{ font-size:12px; color: var(--frc-muted); }
.frc-nav{ display:flex; gap:6px; flex-wrap:wrap; }
.frc-nav .frc-lnk{ padding:8px 12px; border-radius:999px; text-decoration:none; color: var(--frc-primary); font-size:13.5px; font-weight:600; transition: background .15s; }
.frc-nav .frc-lnk:hover{ background:#eef4fb; }
.frc-portal-head .user.mini{ text-align:right; font-size:12.5px; color: var(--frc-muted); }
.frc-portal-head .user.mini .u{ font-weight:700; color: var(--frc-text); }

/* ---------- Botões ---------- */
.frc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius: var(--frc-radius-sm); padding:10px 16px; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; transition: transform .08s ease, box-shadow .15s ease, opacity .15s; }
.frc-btn:active{ transform: scale(.97); }
.frc-btn-primary{ background: var(--frc-primary); color:#fff; }
.frc-btn-primary:hover{ background: var(--frc-primary-dark); }
.frc-btn-secondary{ background:#eef2f7; color: var(--frc-text); }
.frc-btn-danger{ background: var(--frc-danger); color:#fff; }
.frc-btn-ghost{ background: transparent; border:1px solid var(--frc-border); color: var(--frc-text); }
.frc-btn-block{ width:100%; }
.frc-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---------- Formulários ---------- */
.frc-form .row{ margin-bottom:14px; }
.frc-form label{ display:block; font-size:13px; font-weight:600; color: var(--frc-muted); margin-bottom:6px; }
.frc-form input[type="text"], .frc-form input[type="email"], .frc-form input[type="password"],
.frc-form input[type="date"], .frc-form input[type="file"], .frc-form select, .frc-form textarea{
  width:100%; border:1px solid var(--frc-border); border-radius: var(--frc-radius-sm); padding:10px 12px; font-size:14.5px; background:#fbfcfe; transition: border-color .15s, box-shadow .15s;
}
.frc-form input:focus, .frc-form select:focus, .frc-form textarea:focus{ outline:none; border-color: var(--frc-accent); box-shadow: 0 0 0 3px rgba(14,165,233,.15); background:#fff; }
.frc-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.frc-form-grid .row-full{ grid-column: 1 / -1; }
.frc-form .actions{ display:flex; align-items:center; gap:10px; }
.frc-form-status{ font-size:13px; color: var(--frc-muted); }
.frc-divider{ border:0; border-top:1px solid var(--frc-border); margin: 6px 0 10px; }
.row-full span{ font-size:12px; color: var(--frc-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.frc-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
@media (max-width: 720px){ .frc-form-grid{ grid-template-columns: 1fr; } }

/* ---------- Barra de progresso de upload ---------- */
.frc-upload-progress{ margin-top:10px; display:flex; align-items:center; gap:10px; }
.frc-upload-progress .bar{ flex:1; height:8px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.frc-upload-progress .bar i{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--frc-accent), var(--frc-primary)); transition: width .15s ease; }
.frc-upload-progress .pct{ font-size:12px; color: var(--frc-muted); min-width:36px; text-align:right; }
.frc-upload-progress.is-done .bar i{ background: var(--frc-success); }

/* ---------- Badges ---------- */
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.01em; }

/* ---------- Alertas ---------- */
.frc-alert{ border-radius: var(--frc-radius-sm); padding:12px 14px; margin-bottom:14px; font-size:14px; }
.frc-alert ul{ margin:0; padding-left:18px; }
.frc-alert-error{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.frc-alert-success{ background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.frc-alert-info{ background:#e0f2fe; color:#075985; border:1px solid #bae6fd; }

/* ---------- Login / Cadastro ---------- */
.frc-auth-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:24px; background: var(--frc-bg); }
.frc-auth-card{ width:100%; max-width:480px; }
.frc-auth-brand{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.frc-auth-brand img{ height:44px; border-radius:10px; }
.frc-auth-name{ font-weight:700; color: var(--frc-primary); }
.frc-auth-site{ font-size:12px; color: var(--frc-muted); }
.frc-auth-title{ margin:10px 0 4px; font-size:20px; }
.frc-auth-sub{ color: var(--frc-muted); margin:0 0 14px; font-size:13.5px; }
.frc-auth-links{ margin-top:14px; font-size:13.5px; text-align:center; }
.frc-auth-links a{ color: var(--frc-primary); text-decoration:none; font-weight:600; }
.frc-auth-links a:hover{ text-decoration:underline; }
#loginform p label{ display:block; font-size:13px; color: var(--frc-muted); margin-bottom:6px; font-weight:600; }
#loginform input[type="text"], #loginform input[type="password"]{ width:100%; border:1px solid var(--frc-border); border-radius: var(--frc-radius-sm); padding:10px 12px; }
#loginform .login-submit input[type="submit"]{ width:100%; margin-top:8px; padding:11px 14px; border-radius: var(--frc-radius-sm); background: var(--frc-primary); color:#fff; border:0; font-weight:700; cursor:pointer; }

/* ---------- Toolbar de lista / filtros ---------- */
.frc-list-toolbar{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:flex-end; margin-bottom:16px; }
.frc-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.frc-filters label{ font-size:12px; font-weight:600; color: var(--frc-muted); display:flex; flex-direction:column; gap:4px; }
.frc-filters select{ min-width:150px; border:1px solid var(--frc-border); border-radius: var(--frc-radius-sm); padding:8px 10px; background:#fff; }
.frc-view-toggle{ display:flex; border:1px solid var(--frc-border); border-radius:999px; overflow:hidden; }
.frc-view-toggle a{ padding:8px 14px; font-size:13px; text-decoration:none; color: var(--frc-muted); font-weight:600; }
.frc-view-toggle a.active{ background: var(--frc-primary); color:#fff; }

/* ---------- Grid de cards de tickets ---------- */
.frc-cards-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.frc-ticket-card{ background: var(--frc-surface); border:1px solid var(--frc-border); border-radius: var(--frc-radius); padding:16px; text-decoration:none; color: var(--frc-text); box-shadow: var(--frc-shadow); transition: transform .12s ease, box-shadow .12s ease; display:flex; flex-direction:column; gap:10px; }
.frc-ticket-card:hover{ transform: translateY(-3px); box-shadow: var(--frc-shadow-lg); }
.frc-ticket-card.is-closed{ opacity:.65; }
.tc-top{ display:flex; justify-content:space-between; align-items:center; }
.tc-id{ font-size:12px; color: var(--frc-muted); font-weight:700; }
.tc-title{ font-weight:700; font-size:15px; }
.tc-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color: var(--frc-muted); }
.tc-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.tc-due{ font-size:12px; color: var(--frc-muted); font-weight:600; }
.tc-due.due{ color: var(--frc-danger); }
.frc-empty{ color: var(--frc-muted); font-size:14px; padding:20px; text-align:center; }

/* ---------- Painel do ticket ---------- */
.frc-back{ display:inline-block; margin-bottom:12px; color: var(--frc-primary); text-decoration:none; font-weight:600; font-size:13.5px; }
.frc-ticket-head .head-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.frc-ticket-head .head-meta{ display:flex; flex-wrap:wrap; gap:14px; margin:12px 0; font-size:13px; color: var(--frc-muted); }
.frc-ticket-head .head-actions{ display:flex; gap:10px; margin-top:12px; }
.sla-countdown{ font-size:13px; font-weight:700; color: var(--frc-primary); background:#eef4fb; display:inline-block; padding:6px 12px; border-radius:999px; }
.sla-countdown.deadline-soon{ background:#fff7ed; color:#b45309; }
.sla-countdown.deadline-due{ background:#fee2e2; color:#991b1b; }
.frc-attachments-initial{ margin-top:12px; font-size:13px; }

/* ---------- Anexos ---------- */
.frc-att-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.frc-att-list .att-image img{ width:110px; height:110px; object-fit:cover; border-radius:10px; border:1px solid var(--frc-border); }
.frc-att-list .att-file a{ display:inline-flex; align-items:center; gap:6px; background:#f1f5f9; border-radius:8px; padding:8px 12px; font-size:13px; text-decoration:none; color: var(--frc-text); }

/* ---------- Timeline ---------- */
.frc-timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.tl-item{ display:flex; gap:12px; }
.tl-icon{ width:34px; height:34px; border-radius:50%; background:#eef2f7; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.tl-item.tl-staff .tl-icon{ background:#e0f2fe; }
.tl-body{ flex:1; background:#fbfcfe; border:1px solid var(--frc-border); border-radius: var(--frc-radius-sm); padding:10px 14px; }
.tl-meta{ font-size:12.5px; color: var(--frc-muted); margin-bottom:4px; }
.tl-date{ float:right; }
.tl-msg p{ margin:4px 0; }
.tl-item.tl-closed .tl-body, .tl-item.tl-autoclosed .tl-body{ background:#f8fafc; font-style:italic; color: var(--frc-muted); }

/* ---------- Chips de status pré-definido (técnico) ---------- */
.frc-status-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.frc-status-chip{ --chip-color:#64748b; border:1.5px solid var(--chip-color); color: var(--chip-color); background:#fff; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; transition: all .12s ease; }
.frc-status-chip:hover{ background: color-mix(in srgb, var(--chip-color) 12%, white); }
.frc-status-chip.is-selected{ background: var(--chip-color); color:#fff; }

/* ---------- Estatísticas ---------- */
.frc-stat-cards{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.frc-stat-card{ background: var(--frc-surface); border:1px solid var(--frc-border); border-radius: var(--frc-radius); padding:14px; text-align:center; box-shadow: var(--frc-shadow); }
.frc-stat-card .k{ font-size:12px; color: var(--frc-muted); }
.frc-stat-card .v{ font-size:24px; font-weight:800; color: var(--frc-primary); }
.frc-stats-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.frc-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.frc-bars li{ display:grid; grid-template-columns: 1fr 2fr 32px; gap:8px; align-items:center; font-size:13px; }
.frc-bars .bar{ background:#eef2f7; height:9px; border-radius:8px; overflow:hidden; }
.frc-bars .bar i{ display:block; height:100%; background: var(--frc-primary); }
.frc-donut-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.frc-donut{ width:140px; height:140px; transform: rotate(-90deg); }
.frc-donut-legend{ list-style:none; margin:0; padding:0; font-size:13px; }
.frc-donut-legend li{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.frc-donut-legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
@media (max-width: 720px){ .frc-stats-grid{ grid-template-columns: 1fr; } .frc-stat-cards{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Rodapé ---------- */
.frc-footer{ margin-top:20px; padding:12px; text-align:center; color: var(--frc-muted); font-size:12.5px; }

/* ---------- Responsivo geral ---------- */
@media (max-width: 640px){
  .frc-portal{ padding:10px; }
  .frc-portal-head{ flex-direction:column; align-items:flex-start; }
  .frc-portal-head .user.mini{ text-align:left; }
  .frc-nav{ width:100%; }
  .frc-cards-grid{ grid-template-columns: 1fr; }
}