/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom
 * of the compiled file so the styles you add here take precedence over styles defined in
 * any other CSS/SCSS files in this directory. Styles in this file should be added after the last require_* statement.
 * It is suggested that you use Sass to define your application styles.
 *
 *= require_tree .
 *= require_self
 */

/* Base styles */
:root {
  --primary-color: #2563eb;
  --secondary-color: #64748b;
  --text-color: #374151;
  --background-color: #ffffff;
  --border-color: #d1d5db;

  /* ===========================================
     Unified Theme System

     ntabs and Mark share the same color palette.
     Light mode: Clean whites and grays
     Dark mode: GitHub dark palette for consistency
     =========================================== */

  /* Light mode - ntabs shell colors */
  --ntabs-bg-primary: #ffffff;
  --ntabs-bg-secondary: #f6f8fa;
  --ntabs-bg-tertiary: #f3f4f6;
  --ntabs-text-primary: #24292f;
  --ntabs-text-secondary: #586069;
  --ntabs-border: #d0d7de;
  --ntabs-header-bg: #ffffff;
  --ntabs-shadow: rgba(0, 0, 0, 0.1);
  --ntabs-accent: #007acc;

  /* Semantic layer (ADR 016): the one vocabulary the document, the blocks,
     the settings panel and Tailwind's utilities all read. Defined here from
     the shell palette so an unthemed page resolves to exactly what it did;
     a themed page redefines these same names on `.content.nt-themed`. */
  --nt-color-background: var(--ntabs-bg-primary);
  --nt-color-surface: var(--ntabs-bg-secondary);
  --nt-color-foreground: var(--ntabs-text-primary);
  --nt-color-muted-foreground: var(--ntabs-text-secondary);
  --nt-color-accent: var(--ntabs-accent);
  --nt-color-border: var(--ntabs-border);
  --nt-color-border-muted: #e6e8eb;
  --nt-font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --nt-font-heading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --nt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --nt-radius: 6px;
  --nt-density: 1;

  /* Light mode - Mark theme overrides (match ntabs) */
  --mark-theme-bg-primary: var(--ntabs-bg-primary);
  --mark-theme-bg-secondary: var(--ntabs-bg-secondary);
  --mark-theme-text-primary: var(--ntabs-text-primary);
  --mark-theme-text-secondary: var(--ntabs-text-secondary);
  --mark-theme-border-primary: var(--ntabs-border);
}

/* Dark theme - GitHub dark palette (shared by ntabs and Mark) */
[data-theme="dark"] {
  /* Core dark palette - same as Mark's GitHub dark */
  --ntabs-bg-primary: #0d1117;
  --ntabs-bg-secondary: #161b22;
  --ntabs-bg-tertiary: #010409;
  --ntabs-text-primary: #c9d1d9;
  --ntabs-text-secondary: #8b949e;
  --ntabs-border: #30363d;
  --ntabs-header-bg: #161b22;
  --ntabs-shadow: rgba(0, 0, 0, 0.4);
  --ntabs-accent: #58a6ff;

  --nt-color-border-muted: #21262d;

  /* Dark mode - Mark theme overrides (match ntabs) */
  --mark-theme-bg-primary: var(--ntabs-bg-primary);
  --mark-theme-bg-secondary: var(--ntabs-bg-secondary);
  --mark-theme-text-primary: var(--ntabs-text-primary);
  --mark-theme-text-secondary: var(--ntabs-text-secondary);
  --mark-theme-border-primary: var(--ntabs-border);
}

/* The three states (ADR 016): an explicit `data-theme="dark"` (above) wins;
 * with no explicit choice, the reader's OS decides; an explicit
 * `data-theme="light"` beats a dark OS. The tokens are the same set as the
 * block above — nothing may be defined only here. Readers on public pages
 * had no dark mode at all before this: the attribute was only ever stamped
 * by the editor's own toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Core dark palette - same as Mark's GitHub dark */
  --ntabs-bg-primary: #0d1117;
  --ntabs-bg-secondary: #161b22;
  --ntabs-bg-tertiary: #010409;
  --ntabs-text-primary: #c9d1d9;
  --ntabs-text-secondary: #8b949e;
  --ntabs-border: #30363d;
  --ntabs-header-bg: #161b22;
  --ntabs-shadow: rgba(0, 0, 0, 0.4);
  --ntabs-accent: #58a6ff;

  --nt-color-border-muted: #21262d;

  /* Dark mode - Mark theme overrides (match ntabs) */
  --mark-theme-bg-primary: var(--ntabs-bg-primary);
  --mark-theme-bg-secondary: var(--ntabs-bg-secondary);
  --mark-theme-text-primary: var(--ntabs-text-primary);
  --mark-theme-text-secondary: var(--ntabs-text-secondary);
  --mark-theme-border-primary: var(--ntabs-border);
}

  :root:not([data-theme="light"]) body {
    color: var(--ntabs-text-primary);
  }
}


body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--ntabs-bg-tertiary);
  font-family: 'Inter', sans-serif;
  transition: background-color 0.2s ease;
}

[data-theme="dark"] body,
body[data-theme="dark"] {
  color: var(--ntabs-text-primary);
}

* {
  box-sizing: border-box;
}

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 trix-toolbar {
    position: sticky;
    top: 0px;
    background: #fff;
    padding-top: 15px;
    border-bottom: 1px solid #bbb;
}

trix-editor *:hover {
    background: rgb(6 33 251 / 5%);
}

/* trix extensions */
checkbox::before {
    content: "";
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin-right: 5px;
    cursor: pointer;
}

.page-path {
  border: none;
  border-bottom: 1px solid;
}

.page-delete {
  vertical-align: middle;
}
.navbar {
    display: flex;
    justify-content: space-between;
}

.main-container {
  display: flex;
  justify-content: space-between;
}

.main-container .sidebar-container {
  flex-grow: 0;
}

.main-container .content {
  flex-grow: 2;
  margin-right: 40px;
  margin-left: 3px;
}

.sidebar-toggle {
  cursor: pointer;
  padding-top: 15px;
  margin-right: 15px;
}

.sidebar-toggle + .sidebar {
  display: none;
}

.sidebar-container.open {
  flex-grow: 1;
}

.sidebar-container.open .sidebar {
  display: block;
}

.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar ul > li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sidebar ul > li > svg {
    margin-right: 5px;
}

.sidebar ul > li.back ~ li {
    padding-left: 25px;
}

.page-settings {
  position: relative;
}

.page-access-invite-container.active {
    position: absolute;
    background: red;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.page-access-invite-role {
    display: flex;
    align-items: center;
}

.page-access-invite-container .email-message-container {
    /* display: none; */
}
.page-access-invite-container.active .email-message-container {
    display: block;
}
.email-message-container label {
    display: block;
}

/* https://composeicons.com/icons/lucide/square-menu */

/* Estilos para a página de login */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background-color: #f9fafb;
}

/* The auth screens moved to auth.css, on the semantic token layer.
   The rules that lived here hard-coded white, #3b82f6 and #111827, which
   is why the password pages ignored dark mode entirely. */

.login-links {
  margin-top: 1.5rem;
  text-align: center;
}

.login-links a {
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.875rem;
}

.login-links a:hover {
  text-decoration: underline;
}

.login-error {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #fee2e2;
  color: #b91c1c;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* Estilos para validação de senha */
.login-form .password-requirements {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.login-form .field .password-strength {
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.login-form .field .password-strength::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  background-color: #ef4444;
  transition: width 0.3s, background-color 0.3s;
}

.login-form .field .password-strength.weak::after {
  width: 33%;
  background-color: #ef4444;
}

.login-form .field .password-strength.medium::after {
  width: 66%;
  background-color: #f59e0b;
}

.login-form .field .password-strength.strong::after {
  width: 100%;
  background-color: #10b981;
}

.login-form input:invalid {
  border-color: #ef4444;
}

.login-form input:invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

.login-form .field-error {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Melhorias visuais para inputs */
.login-form input[type="email"],
.login-form input[type="password"] {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form input[type="email"]::placeholder,
.login-form input[type="password"]::placeholder {
  color: #9ca3af;
}

.settings-section-description.quote {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--color-background-subtle);
  border-left: 4px solid var(--color-border);
  border-radius: 4px;
  margin: 1rem 0;
}

.quote-icon {
  font-size: 1.25rem;
  line-height: 1.5;
}

.quote-content {
  flex: 1;
  line-height: 1.5;
}

/* ========================================
   Autosave Status Indicator
   ======================================== */
.autosave-status {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  pointer-events: none;
}

.autosave-status.visible {
  opacity: 1;
  transform: translateY(0);
}

.autosave-saving,
.autosave-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.autosave-spinner {
  animation: autosave-spin 1s linear infinite;
}

@keyframes autosave-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.autosave-saved svg {
  color: #10b981;
}

/* Dark mode support */
.mark-dark .autosave-status {
  background: rgba(30, 30, 30, 0.95);
  color: #9ca3af;
}