/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
    /* --primary: #636e72;
    --secondary: #2d3436; */
    --primary: #79aec8;
    --secondary: #417690;
    --accent: #f5dd5d;
    --primary-fg: #fff;

    --tab-current-color: var(--secondary);

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --header-color: #ffc;
    --header-branding-color: var(--accent);
    --header-bg: #34495e;
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #34495e;
    --breadcrumbs-link-fg: #34495e;
    --breadcrumbs-bg: transparent;

    --link-fg: #417893;
    --link-hover-color: #036;
    --link-selected-fg: #5b80b2;

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --navbar-background-color: var(--header-bg);
    --navbar-item-background-a: 0.05;

    --sidebar-category-group-color: var(--body-quiet-color);
    --sidebar-link-fg: var(--link-fg);
    --sidebar-link-hover-fg: var(--link-hover-color);

    --np-hero-background: var(--darkened-bg);
    --np-hero-border-color: var(--border-color);

    --button-fg: #fff;
    --button-bg: var(--primary);
    --button-hover-bg: #609ab6;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #205067;
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    --font-family-primary:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace:
        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,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

body {
  font-family: "Lato", "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
  height: auto!important;
}

.submit-row a.closelink {
  height: auto!important;
}

.d-none { display: none }

html[data-theme="light"] .visible-on-light { display: block!important }
html[data-theme="dark"] .visible-on-dark { display: block!important }

@media (prefers-color-scheme: dark) { html[data-theme="auto"] .visible-on-dark { display: block!important } }
@media (prefers-color-scheme: light) { html[data-theme="auto"] .visible-on-light { display: block!important } }


/** VARIABLES BULMA */
.navbar {
  --bulma-navbar-background-color: var(--navbar-background-color);
}

.navbar-link:focus,
.navbar-link:focus-within,
.navbar-link:hover,
a.navbar-item:focus,
a.navbar-item:focus-within,
a.navbar-item:hover {
  --bulma-navbar-item-background-a: var(--navbar-item-background-a);
}

.navbar #branding img {
  height: 18px;
  display: none;
}

/**
 * LAYOUT
 */

.np-dash {
  --np-outer: 1.5rem;
  --np-inner: 1.5rem;
  --np-side-padding: 1rem;
  --np-side-border-color: var(--border-color);
  position: relative;
}


#np-layout {
  display: grid;
  grid-template-columns: 100%;
  min-height: calc(100vh - 3.25rem);
}
/* Só abre a coluna do sidebar quando ele existe (login e popup não têm). */
#np-layout:has(> #np-sidebar) {
  grid-template-columns: 11.25rem calc(100% - 11.25rem);
}

#np-layout > #np-sidebar {
  background-color: var(--darkened-bg);
  border-right: 0.5px solid var(--np-side-border-color);
  width: 11.25rem;
}

#np-layout > #np-sidebar > #sidebar {
  --height: 1.25;
  max-height: 100vh;
  overflow-y: auto;
  padding: var(--np-side-padding);
  position: sticky;
  top: 0;
}

#admin-navbar .navbar-end #user-tools {
  align-content: center;
  margin: 0 12px 0 0;
  color: var(--header-link-color);
}
#admin-navbar .navbar-end #user-tools a:link,
#admin-navbar .navbar-end #user-tools a:visited,
#admin-navbar .navbar-end #user-tools strong {
  color: var(--header-link-color);
}

#admin-navbar .navbar-end #user-tools .theme-toggle svg.theme-icon-when-auto,
#admin-navbar .navbar-end #user-tools .theme-toggle svg.theme-icon-when-dark,
#admin-navbar .navbar-end #user-tools .theme-toggle svg.theme-icon-when-light {
  /* color: transparent; */
}

.np-key {
  align-items: center;
  background: rgba(0,0,0,.1);
  border-radius: 0.25em;
  color: rgba(0,0,0,.5);
  display: none;
  font-family: monospace;
  font-size: .625rem;
  height: 2em;
  justify-content: center;
  min-width: 2em;
  padding: 0 0.25em;
  pointer-events: none;
  text-align: center;
  z-index: 2;
}

#np-layout > #np-sidebar > #sidebar .np-categories-no-results {
  display: none;
}
#np-layout > #np-sidebar > #sidebar .np-categories-filter .np-key {
  position: absolute;
  right: 6px;
  top: 4px;
}

#np-layout > #np-sidebar > #sidebar .np-categories-filter {
  margin-bottom: 1em;
  position: relative;
}

#np-layout > #np-sidebar > #sidebar .np-category-group  {
  color: #b5b5b5;
  color: var(--sidebar-category-group-color);
  font-size: .625em;
  font-weight: 600;
  letter-spacing: .2em;
  margin-bottom: calc(var(--np-side-padding)/ 2);
  margin-top: var(--np-side-padding);
  text-transform: uppercase;
}

#np-layout > #np-sidebar > #sidebar .np-category-header {
  position: relative;
}

#np-layout > #np-sidebar > #sidebar .np-category-toggle {
  border-radius: 0.375em;
  color: var(--primary);
  cursor: pointer;
  display: none;
  height: calc(1em * var(--height));
  margin-left: auto;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: calc(1em * var(--height));
}

#np-layout > #np-sidebar > #sidebar .np-category-list {
  display: none;
  padding: 0.25em 0.75em 0.75em;
}
#np-layout > #np-sidebar > #sidebar > #categories > .np-category.is-open .np-category-list {
  display: block;
}
#np-layout > #np-sidebar > #sidebar > #categories > .np-category.is-current .np-category-name.is-active {
  background-color: var(--primary);
  color: var(--primary-invert);
}

#np-layout > #np-sidebar > #sidebar .np-category-list li {
  align-items: flex-start;
  display: flex;
  font-size: .875em;
}

#np-layout > #np-sidebar > #sidebar .np-anchors-list a,
#np-layout > #np-sidebar > #sidebar .np-category-list li a,
#np-layout > #np-sidebar > #sidebar .np-category-name {
  --highlight-background-color: var(--primary);
  --highlight-color: var(--primary-invert);
  align-items: center;
  border-radius: 0.375em;
  color: var(--body-quiet-fg);
  cursor: pointer;
  display: flex;
  line-height: var(--height);
  padding: 0.375em 0.75em;
  width: 100%;
  transition-duration: 86ms;
  transition-property: background-color,color;
}

#np-layout > #np-sidebar > #sidebar .np-anchors-list a:hover,
#np-layout > #np-sidebar > #sidebar .np-category-list li a:hover,
#np-layout > #np-sidebar > #sidebar .np-category-name:hover {
  background-color: var(--primary-invert);
  color: var(--sidebar-link-hover-fg);
}

#np-layout > #np-dash-main {
  padding-bottom: var(--docs-outer);
  padding-left: var(--docs-outer);
  padding-right: var(--docs-outer);
}

#np-layout #content.is-dashboard {
  padding: 20px;
}

/* np-event-hero */

#np-dash-hero .hero {
  background-color: var(--np-hero-background);
}

#np-dash-hero .hero .breadcrumbs {
  background-color: transparent;
}

#np-dash-hero .hero .hero-body .subtitle {
  margin-top: 0;
}

#np-dash-hero .hero .hero-foot,
#np-dash-hero .hero .hero-subfoot {
  border-bottom: 1px solid var(--np-hero-border-color);
}

#np-dash-hero .hero .hero-foot .tabs,
#np-dash-hero .hero .hero-subfoot .tabs {
  position: relative;
  top: 1px;
}

#np-dash-hero .hero .hero-foot .tabs ul,
#np-dash-hero .hero .hero-subfoot .tabs ul {
  margin: 0;
  padding: 0;
}
#np-dash-hero .hero .hero-foot .tabs li,
#np-dash-hero .hero .hero-foot .tabs li a {
  color: var(--body-quiet-color);
}
#np-dash-hero .hero .hero-foot .tabs li.is-disabled,
#np-dash-hero .hero .hero-foot .tabs li.is-disabled a {
  color: #a4a4a4;
}
#np-dash-hero .hero .hero-foot .tabs a .icon {
  width: 12px;
  height: 12px;
  margin: 0.20rem 0.25rem 0 0;
}

#np-dash-hero .hero .hero-subfoot {
  background-color: var(--body-bg);
}

#np-dash-main ul.object-tools {
  margin-top: -55px;
}

caption > a.section {
  padding: 0;
}

.submit-row a.deletelink {
  height: 35px!important;
}
.delete-confirmation form .cancel-link {
  height: 35px!important;
}

.inline-group .tabular td.original p {
  height: 2.1em!important;
}

#toolbar #searchbar {
  height: 25px!important;
}

/** BREADCRUMBS */

/* DJANGO ADMIN BREADCRUMBS */
div.breadcrumbs,
nav.breadcrumb {
  padding: 10px 20px;
  margin-bottom: 0;
}
nav.breadcrumb.has-border-bottom {
  border-bottom: 0.5px solid var(--hairline-color);
}

.breadcrumb ul, .breadcrumb ol {
  margin: 0;
}

.breadcrumb a {
  padding: 0 0.35em;
}

.breadcrumb.has-succeeds-separator li+li::before {
  content: "\203A";
}


/**
 * Home
 */

.notification a.no-link {
  text-decoration: none!important;
}


/**
 * TABS
 */

.tabset {
  padding: 20px 0 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
}

.tabset > a {
  color: #666;
  position: relative;
  display: inline-block;
  padding: 15px 15px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 400;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tabset.narrow > a { padding: 8px 14px!important }

.tabset > a:focus { text-decoration: none }
.tabset > a:hover {
  background-color: rgba(0,0,0,0.1);
}

.tabset > a.current {
  color: #417690;
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tabset > a.current:hover { background-color: transparent }

.tabset > a.current > i { color: #417690 }


/* short-id */
.short-id {
  color: #666;
  border-radius: 0.3rem;
  background-color: transparent;
}
.short-id .icon {
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.25rem;
  top: 8px;
  position: relative;
}
th.column-short_id {
  min-width: 102px;
}
.field-short_id {
  padding: 0.2rem 0.5rem;
}
.field-short_id .short-id {
  position: relative;
  top: -2px;
}

/**
 * MOBILE (até o breakpoint tablet do Bulma): uma coluna; o sidebar vira uma
 * faixa de chips roláveis embaixo da navbar, em vez de uma coluna fixa que
 * comia metade da tela.
 */
@media (max-width: 768px) {
  #np-layout,
  #np-layout:has(> #np-sidebar) {
    grid-template-columns: 100%;
  }
  /* Item de grid tem min-width:auto — sem isto a faixa de chips e a tabela
     do changelist alargam a página em vez de rolar dentro do seu container. */
  #np-layout > #np-sidebar,
  #np-layout > #np-sidebar > #sidebar,
  #np-layout > #np-dash-main {
    min-width: 0;
  }
  #np-layout > #np-sidebar {
    border-right: 0;
    border-bottom: 0.5px solid var(--np-side-border-color);
    width: 100%;
  }
  #np-layout > #np-sidebar > #sidebar {
    max-height: none;
    overflow: visible;
    padding: 0.5rem var(--np-side-padding);
    position: static;
  }
  #np-layout > #np-sidebar > #sidebar > #categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #np-layout > #np-sidebar > #sidebar > #categories::-webkit-scrollbar {
    display: none;
  }
  #np-layout > #np-sidebar > #sidebar .np-category-group {
    /* rótulos de grupo (GERAL, OPERAÇÃO...) viram separador discreto */
    align-self: center;
    flex: none;
    margin: 0 0.25rem 0 0.5rem;
    white-space: nowrap;
  }
  #np-layout > #np-sidebar > #sidebar .np-category {
    flex: none;
  }
  #np-layout > #np-sidebar > #sidebar .np-category-name {
    background-color: var(--body-bg);
    border: 0.5px solid var(--np-side-border-color);
    border-radius: 999px;
    font-size: 0.875em;
    padding: 0.25em 0.75em;
    white-space: nowrap;
    width: auto;
  }
  #np-layout > #np-dash-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  /* Login: formulário ocupa a largura, sem a coluna vazia à esquerda. */
  body.login #content-main {
    max-width: 100%;
  }
  /* Tooltip (balloon.css) da marca é um ::after absoluto de 340px pra direita
     — em tela estreita ele alarga a página. Touch não tem hover: some. */
  [data-balloon-pos]::before,
  [data-balloon-pos]::after {
    display: none !important;
  }
  /* No desktop os object-tools sobem pra ficar ao lado do h1 (margin-top
     negativo); no mobile não há espaço ao lado — ficam abaixo do título. */
  #np-dash-main ul.object-tools {
    float: none;
    margin: 0 0 0.75rem;
    padding: 0;
  }
}