/* ===========================================================
   Skylincx — design system sobre o tema huraga (Bootstrap 5)
   Trocar a paleta = editar apenas os tokens em :root
   =========================================================== */
:root {
  --sk-ink:          #0B1220;
  --sk-ink-2:        #101A2C;
  --sk-primary:      #1552D6;
  --sk-primary-rgb:  21, 82, 214;
  --sk-primary-700:  #1040A8;
  --sk-primary-050:  #EEF3FF;
  --sk-accent:       #12B5C9;
  --sk-accent-rgb:   18, 181, 201;
  --sk-bg:           #F6F8FB;
  --sk-surface:      #FFFFFF;
  --sk-border:       #E3E8EF;
  --sk-border-soft:  #EDF1F6;
  --sk-text:         #1B2430;
  --sk-muted:        #5B6675;
  --sk-radius:       14px;
  --sk-radius-sm:    10px;
  --sk-shadow-sm:    0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --sk-shadow-md:    0 10px 30px rgba(16,24,40,.09);
  --sk-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* --- Tokens Bootstrap --- */
:root, [data-bs-theme="light"] {
  --bs-primary: var(--sk-primary);
  --bs-primary-rgb: var(--sk-primary-rgb);
  --bs-link-color: var(--sk-primary);
  --bs-link-color-rgb: var(--sk-primary-rgb);
  --bs-link-hover-color: var(--sk-primary-700);
  --bs-body-bg: var(--sk-bg);
  --bs-body-color: var(--sk-text);
  --bs-border-color: var(--sk-border);
  --bs-border-radius: var(--sk-radius);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 18px;
  --bs-heading-color: var(--sk-ink);
  --bs-emphasis-color: var(--sk-ink);
  --bs-secondary-color: var(--sk-muted);
  --bs-tertiary-bg: #F2F5F9;
  --bs-body-font-family: var(--sk-font);
}
[data-bs-theme="dark"] {
  --bs-primary: #4E86FF;
  --bs-primary-rgb: 78, 134, 255;
  --bs-body-bg: #0B1220;
  --bs-body-color: #E6EDF7;
  --bs-border-color: #223049;
  --bs-link-color: #7FB0FF;
  --bs-link-hover-color: #A9C9FF;
  --bs-heading-color: #FFFFFF;
  --bs-secondary-color: rgba(230,237,247,.72);
  --sk-surface: #101A2C;
  --sk-border: #223049;
  --sk-border-soft: #1a2740;
  --sk-muted: #93A3BE;
}

body { font-family: var(--sk-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { letter-spacing: -.02em; font-weight: 660; }
a { text-underline-offset: 2px; }
:focus-visible { outline: 2px solid rgba(var(--sk-primary-rgb), .85); outline-offset: 2px; border-radius: 6px; }

/* --- Shell: header / nav --- */
header nav.navbar { border-bottom: 1px solid var(--sk-border); background: var(--sk-surface); padding-block: .9rem !important; }
header nav.navbar .navbar-brand img { max-height: 38px; }
.nav-link { font-weight: 560; color: var(--sk-text); border-radius: 8px; padding: .4rem .65rem; }
.nav-link:hover { color: var(--sk-primary); background: rgba(var(--sk-primary-rgb), .06); }
.nav-link.active { color: var(--sk-primary); }
.client-dropdown .dropdown-toggle { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.dropdown-menu { border: 1px solid var(--sk-border); border-radius: 12px; box-shadow: var(--sk-shadow-md); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .45rem .6rem; }
.dropdown-item:hover { background: var(--sk-primary-050); color: var(--sk-primary); }
[data-bs-theme="dark"] .dropdown-item:hover { background: #16223a; }

/* --- Sidebar --- */
#sidebarMenu .nav-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; margin-bottom: .15rem; color: var(--sk-muted); font-weight: 560; }
#sidebarMenu .nav-link:hover { color: var(--sk-primary); background: rgba(var(--sk-primary-rgb), .07); }
#sidebarMenu .nav-link.active { color: var(--sk-primary); background: var(--sk-primary-050); font-weight: 640; }
[data-bs-theme="dark"] #sidebarMenu .nav-link.active { background: #16223a; }
#sidebarMenu .nav-link .icon { width: 1.1rem; height: 1.1rem; opacity: .9; }

/* --- Conteúdo --- */
.content-block { min-height: 1px; }
.breadcrumb { --bs-breadcrumb-divider: "›"; font-size: .9rem; }
.breadcrumb a { color: var(--sk-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--sk-primary); }

/* --- Botões --- */
.btn { --bs-btn-border-radius: 10px; font-weight: 600; transition: transform .08s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: var(--sk-primary); --bs-btn-border-color: var(--sk-primary);
  --bs-btn-hover-bg: var(--sk-primary-700); --bs-btn-hover-border-color: var(--sk-primary-700);
  --bs-btn-active-bg: var(--sk-primary-700); --bs-btn-active-border-color: var(--sk-primary-700);
  --bs-btn-disabled-bg: var(--sk-primary); --bs-btn-disabled-border-color: var(--sk-primary);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  box-shadow: 0 1px 2px rgba(var(--sk-primary-rgb), .32);
}
.btn-outline-primary {
  --bs-btn-color: var(--sk-primary); --bs-btn-border-color: rgba(var(--sk-primary-rgb), .5);
  --bs-btn-hover-bg: var(--sk-primary); --bs-btn-hover-border-color: var(--sk-primary); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sk-primary-700); --bs-btn-active-border-color: var(--sk-primary-700); --bs-btn-active-color: #fff;
}
/* btn-dark passa a "soft": ações secundárias deixam de pesar */
.btn-dark {
  --bs-btn-bg: #EDF1F6; --bs-btn-border-color: #E1E7EF; --bs-btn-color: #23303F;
  --bs-btn-hover-bg: #E2E8F1; --bs-btn-hover-border-color: #D5DDE8; --bs-btn-hover-color: #16202c;
  --bs-btn-active-bg: #D8E0EA; --bs-btn-active-border-color: #ccd6e2; --bs-btn-active-color: #16202c;
  box-shadow: none;
}
[data-bs-theme="dark"] .btn-dark {
  --bs-btn-bg: #1a2740; --bs-btn-border-color: #223049; --bs-btn-color: #E6EDF7;
  --bs-btn-hover-bg: #223049; --bs-btn-hover-color: #fff;
}
.btn-link { text-decoration: none; }

/* --- Cards --- */
.card { --bs-card-border-color: var(--sk-border); --bs-card-border-radius: var(--sk-radius); --bs-card-cap-bg: #FBFCFE; box-shadow: var(--sk-shadow-sm); }
[data-bs-theme="dark"] .card { background-color: var(--sk-surface); --bs-card-cap-bg: #0d1526; }
.card-header { border-bottom: 1px solid var(--sk-border-soft); font-weight: 620; }
.card-header h1, .card-header h2, .card-header h6 { margin: 0; letter-spacing: -.01em; }
.card-body { padding: 1.15rem 1.25rem; }

/* --- Tabelas --- */
.table { --bs-table-border-color: var(--sk-border-soft); margin-bottom: 0; }
.table thead th { font-weight: 640; color: var(--sk-muted); text-transform: uppercase; font-size: .74rem; letter-spacing: .05em; border-bottom-color: var(--sk-border); }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table-hover > tbody > tr:hover > * { background: #F7F9FC; }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background: #131d31; }

/* --- Formulários --- */
.form-control, .form-select { border-radius: var(--sk-radius-sm); border-color: var(--sk-border); }
.form-control:focus, .form-select:focus { border-color: rgba(var(--sk-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--sk-primary-rgb), .16); }
.form-label { font-weight: 580; color: var(--sk-ink); margin-bottom: .35rem; }
[data-bs-theme="dark"] .form-label { color: #E6EDF7; }
.form-check-input:checked { background-color: var(--sk-primary); border-color: var(--sk-primary); }

/* --- List groups --- */
.list-group { --bs-list-group-border-color: var(--sk-border-soft); border-radius: var(--sk-radius-sm); }
.list-group-item { border-color: var(--sk-border-soft); }
.list-group-item-action:hover { background: #F7F9FC; }
[data-bs-theme="dark"] .list-group-item-action:hover { background: #131d31; }
.list-group-item .icon { width: 1rem; height: 1rem; opacity: .6; }

/* --- Accordion (fluxo de encomenda) --- */
.accordion { --bs-accordion-border-color: var(--sk-border); --bs-accordion-border-radius: var(--sk-radius); --bs-accordion-btn-focus-box-shadow: none; }
.accordion-item { border-radius: var(--sk-radius) !important; overflow: hidden; margin-bottom: .6rem; border: 1px solid var(--sk-border) !important; }
.accordion-button { font-weight: 640; padding: 1rem 1.1rem; background: var(--sk-surface); }
.accordion-button:not(.collapsed) { color: var(--sk-primary); background: var(--sk-primary-050); box-shadow: none; }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: #16223a; color: #9dc0ff; }
.accordion-body { padding: 1.1rem; }

/* --- Badges / alerts --- */
.badge { border-radius: 999px; font-weight: 620; padding: .35em .62em; letter-spacing: .01em; }
.badge.bg-info { background: var(--sk-primary-050) !important; color: var(--sk-primary-700) !important; }
.badge.bg-success { background: #E6F7EF !important; color: #0B7A4E !important; }
.badge.bg-warning { background: #FFF4E0 !important; color: #8A5B00 !important; }
.badge.bg-danger { background: #FDECEC !important; color: #A32222 !important; }
.badge.bg-secondary { background: #EEF1F5 !important; color: #475467 !important; }
.alert { border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); }
.alert-info { background: var(--sk-primary-050); border-color: rgba(var(--sk-primary-rgb), .18); color: #16305e; }
[data-bs-theme="dark"] .alert-info { background: #142239; border-color: #223049; color: #CFE0FF; }

/* --- Paginação --- */
.pagination { --bs-pagination-border-color: var(--sk-border); --bs-pagination-hover-bg: var(--sk-primary-050); --bs-pagination-active-bg: var(--sk-primary); --bs-pagination-active-border-color: var(--sk-primary); --bs-pagination-focus-box-shadow: none; }
.page-link { border-radius: 8px !important; margin: 0 .15rem; }

/* --- Footer --- */
#footer { border-top: 1px solid var(--sk-border); padding-top: 1.1rem; margin-top: 2rem !important; }
#footer a { color: var(--sk-muted); }
#footer a:hover { color: var(--sk-primary); }

/* ===========================================================
   Páginas de autenticação (login / registo)
   =========================================================== */
.sk-auth { display: grid; min-height: 100vh; grid-template-columns: 1.05fr .95fr; }
.sk-auth__aside {
  position: relative; color: #E6EDF7; padding: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(700px 380px at 85% 8%, rgba(18,181,201,.22), transparent 60%),
    radial-gradient(600px 380px at 12% 95%, rgba(var(--sk-primary-rgb), .35), transparent 60%),
    var(--sk-ink);
  display: flex; flex-direction: column; justify-content: space-between;
}
.sk-auth__aside h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 22ch; }
.sk-auth__aside p { color: #A9B8D2; max-width: 40ch; }
.sk-auth__brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 720; font-size: 1.15rem; text-decoration: none; }
.sk-auth__brand:hover { color: #fff; text-decoration: none; }
.sk-auth__mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3B7BF6, #25C6DA); }
.sk-auth__points { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.sk-auth__points li { position: relative; padding-left: 1.5rem; color: #C7D3E8; }
.sk-auth__points li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sk-accent); }
.sk-auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.sk-auth__card { width: min(460px, 100%); }
.sk-auth__card .card { border-radius: 18px; box-shadow: var(--sk-shadow-md); }
.sk-auth__logo { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.sk-auth__logo img { max-height: 44px; }
.sk-auth__title { font-size: 1.35rem; margin-bottom: .25rem; }
.sk-auth__sub { color: var(--sk-muted); margin-bottom: 1.4rem; }
@media (max-width: 860px) {
  .sk-auth { grid-template-columns: 1fr; }
  .sk-auth__aside { display: none; }
  .sk-auth__main { min-height: 100vh; }
}

/* ===========================================================
   Dashboard
   =========================================================== */
.sk-hero {
  position: relative; overflow: hidden; color: #E6EDF7; border-radius: var(--sk-radius);
  padding: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1.25rem;
  background:
    radial-gradient(600px 300px at 92% 0%, rgba(18,181,201,.25), transparent 60%),
    radial-gradient(520px 320px at 0% 100%, rgba(var(--sk-primary-rgb), .35), transparent 60%),
    var(--sk-ink);
}
.sk-hero h1 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.05rem); margin-bottom: .5rem; }
.sk-hero p { color: #AFC0DA; margin-bottom: 1.1rem; max-width: 60ch; }
.sk-hero p:last-child { margin-bottom: 0; }
.sk-hero .btn-light { background: #fff; color: var(--sk-ink); }
.sk-hero .btn-light:hover { background: #EDF2F9; }

.sk-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.sk-action {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.15rem;
  background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow-sm); color: var(--sk-text); text-decoration: none;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.sk-action:hover { transform: translateY(-2px); box-shadow: var(--sk-shadow-md); border-color: rgba(var(--sk-primary-rgb), .35); color: var(--sk-text); text-decoration: none; }
.sk-action__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--sk-primary-050); color: var(--sk-primary); }
.sk-action__icon .icon { width: 1.15rem; height: 1.15rem; }
.sk-action strong { font-size: 1rem; letter-spacing: -.01em; }
.sk-action span { color: var(--sk-muted); font-size: .9rem; }

.sk-stat { display: flex; align-items: baseline; gap: .5rem; }
.sk-stat b { font-size: 1.5rem; font-weight: 720; color: var(--sk-ink); letter-spacing: -.02em; }
[data-bs-theme="dark"] .sk-stat b { color: #fff; }
.sk-stat span { color: var(--sk-muted); font-size: .85rem; }
.sk-empty { text-align: center; color: var(--sk-muted); padding: 1.5rem 1rem; }

@media (max-width: 900px) { .sk-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sk-actions { grid-template-columns: 1fr; } }

/* ===========================================================
   Catálogo de planos
   =========================================================== */
.sk-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: .4rem; }
.sk-plan {
  position: relative; display: flex; flex-direction: column; padding: 1.4rem 1.3rem;
  background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow-sm);
}
.sk-plan:hover { box-shadow: var(--sk-shadow-md); border-color: rgba(var(--sk-primary-rgb), .3); }
.sk-plan h4 { margin-bottom: .15rem; font-size: 1.1rem; }
.sk-plan__price { font-size: 1.9rem; font-weight: 760; color: var(--sk-ink); letter-spacing: -.03em; margin: .35rem 0 .1rem; }
[data-bs-theme="dark"] .sk-plan__price { color: #fff; }
.sk-plan__price small { font-size: .9rem; font-weight: 500; color: var(--sk-muted); margin-left: .2rem; }
.sk-plan__desc { color: var(--sk-muted); font-size: .92rem; min-height: 2.6em; margin-bottom: 1rem; }
.sk-plan .btn { margin-top: auto; }
@media (max-width: 900px) { .sk-plans { grid-template-columns: 1fr; } }

/* ===========================================================
   Secções de conteúdo (loja / área pública)
   =========================================================== */
.sk-block { margin: 2.6rem 0; }
.sk-block__head { max-width: 640px; margin-bottom: 1.4rem; }
.sk-block__head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .3rem; }
.sk-block__head p { color: var(--sk-muted); margin: 0; }
.sk-block__sub { font-size: .8rem; color: var(--sk-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin: 1.7rem 0 .8rem; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sk-feature { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 1.15rem 1.2rem; box-shadow: var(--sk-shadow-sm); }
.sk-feature__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sk-primary-050); color: var(--sk-primary); margin-bottom: .7rem; }
.sk-feature__icon .icon { width: 1.1rem; height: 1.1rem; }
.sk-feature h4 { font-size: 1rem; margin-bottom: .25rem; }
.sk-feature p { color: var(--sk-muted); margin: 0; font-size: .93rem; }
.sk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.sk-step { border-top: 2px solid var(--sk-border); padding-top: .9rem; }
.sk-step b { display: block; color: var(--sk-primary); font-size: 1.35rem; font-weight: 760; letter-spacing: -.02em; margin-bottom: .35rem; }
.sk-step h4 { font-size: 1rem; margin-bottom: .25rem; }
.sk-step p { color: var(--sk-muted); margin: 0; font-size: .93rem; }
.sk-faq { display: grid; gap: .6rem; max-width: 800px; }
.sk-faq details { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: 12px; padding: 0 1.1rem; }
.sk-faq summary { cursor: pointer; list-style: none; padding: .95rem 0; font-weight: 640; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary::after { content: "+"; color: var(--sk-primary); font-size: 1.25rem; line-height: 1; }
.sk-faq details[open] summary::after { content: "\2013"; }
.sk-faq p { margin: 0 0 1rem; color: var(--sk-muted); }
.sk-cta {
  border-radius: var(--sk-radius); padding: clamp(1.5rem, 3vw, 2.2rem); color: #E6EDF7;
  background:
    radial-gradient(600px 300px at 92% 0%, rgba(18,181,201,.25), transparent 60%),
    radial-gradient(520px 300px at 0% 100%, rgba(var(--sk-primary-rgb), .35), transparent 60%),
    var(--sk-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.sk-cta h3 { color: #fff; margin: 0 0 .25rem; }
.sk-cta p { color: #AFC0DA; margin: 0; }
@media (max-width: 900px) { .sk-grid, .sk-steps { grid-template-columns: 1fr; } }

/* --- Movimento --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}