/* 
    admin-extra.css

   --user-bright: rgb(70%, 100%,  0%); in /cloud.css
   --user-accent: rgb(87%, 100%, 60%);
       --user-bg: rgb(15%,  15%, 15%); */

/*:::::::::::::::::::::::::::::::::::::::: base.css */

/* VARIABLE DEFINITIONS */

html[data-theme="light"],
:root {
    --secondary: var(--button-bg);
    --accent: var(--user-bright);
    --header-color: var(--user-bright);
    --header-bg: var(--user-bg);
    --header-link-color: var(--user-bright);
    --message-success-bg: var(--user-bright);
    --breadcrumbs-fg: white;
    --breadcrumbs-link-fg: var(--user-bright);
    --breadcrumbs-bg: var(--user-bg);
    --link-fg:hsl(0, 0%, 15%);
    --link-hover-color:black;
    --button-bg: var(--close-button-bg);
    --button-hover-bg:var(--close-button-hover-bg);
    --default-button-fg: var(--user-bright);
    --default-button-bg: var(--user-bg);
    --default-button-hover-fg: var(--user-bg);
    --default-button-hover-bg: var(--user-bright);

    --illustrator-bright: #f19f39;
    --illustrator-dark: #2e0402;
}
    color-scheme: light;
    background: var(--button-hover-bg);
}

@media (prefers-color-scheme: dark) {
    :root {
    --secondary: #417690;
    --accent: var(--user-bright);
    --header-color: var(--user-bright);
    --header-bg: var(--user-bg);
    --header-link-color: var(--user-bright);
    --message-success-bg: var(--user-bg);
    --breadcrumbs-fg: white;
    --breadcrumbs-link-fg: var(--user-bright);
    --breadcrumbs-bg: var(--user-bg);
    --link-fg:hsl(0, 0%, 85%);
    --link-hover-color: var(--user-bright);
    --button-bg: var(--close-button-bg);
    --button-hover-bg:var(--close-button-hover-bg);
    --default-button-fg: var(--user-bg);
    --default-button-bg: var(--user-bright);
    --default-button-hover-fg: var(--user-bright);
    --default-button-hover-bg: var(--user-bg);

    --illustrator-bright: #F9991F;
    --illustrator-dark: #310001;
      color-scheme: dark;
    }
  }

/* LINKS */

a:link, a:visited{
    border-bottom:1px solid #0000; /* so it won't jump on mouseover */
}

a:focus, a:hover {
    text-decoration:none;
    border-bottom:1px solid var(--link-hover-color);
}

/* FORM BUTTONS */

.button.default:focus, input[type=submit].default:focus,
.button.default, input[type=submit].default, .submit-row input.default {
    color: var(--default-button-fg);
    border: none;
}

.button.default:active, input[type=submit].default:active,
.button.default:focus, input[type=submit].default:focus,
.button.default:hover, input[type=submit].default:hover {
    color: var(--default-button-hover-fg);
}

/* MODULES */

/* title of main model list */
.module caption{
  border-radius:4px;
}

.module.current-app tr:nth-child(-n+3) { /* rows 1-3 in main model list */
    background: var(--selected-bg);
}
.module.current-app tr:nth-child(-n+3) a:link,
.module.current-app tr:nth-child(-n+3) a:visited{
    color:var(--body-fg);
}
.module.current-app tr:nth-child(-n+3) a:hover,
.module.current-app tr:nth-child(-n+3) a:active{
    border-bottom:1px solid var(--body-fg);
}

.module.current-app tr:nth-child(n+4):nth-child(-n+6) { /* rows 4-6 in main model list */
    background: var(--user-bright);
}
.module.current-app tr:nth-child(n+4):nth-child(-n+6) a:link,
.module.current-app tr:nth-child(n+4):nth-child(-n+6) a:visited{
    color:var(--user-bg);
}
.module.current-app tr:nth-child(n+4):nth-child(-n+6) a:hover,
.module.current-app tr:nth-child(n+4):nth-child(-n+6) a:active{
    color:var(--user-bg);
}

.module.current-app tr:nth-child(n+7):nth-child(-n+9) { /* rows 7-9 in main model list */
    background: none;
}
.module.current-app tr:nth-child(n+7):nth-child(-n+9) a:link,
.module.current-app tr:nth-child(n+7):nth-child(-n+9) a:visited{
    color:var(--body-fg);
}
.module.current-app tr:nth-child(n+7):nth-child(-n+9) a:hover,
.module.current-app tr:nth-child(n+7):nth-child(-n+9) a:active{
    border-bottom:1px solid var(--body-fg);
}

/* hide "control" model */
tr.model-control{ display:none; }

/* OBJECT TOOLS */

.object-tools a:link, .object-tools a:visited {
    border-radius: 4px;
    color: var(--user-bright);
    background: var(--user-bg);
}
.object-tools a:focus, .object-tools a:hover {
    color: var(--user-bg);
    background-color: var(--user-bright);
    border:none;
}

/* BREADCRUMBS */

/* line over breadcrumbs */
div.breadcrumbs{
  border-top:1px solid var(--user-accent);
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    border:none;
}

/* TABLES */

body thead th a:link, body thead th a:visited {
   border:none;
}

/* HEADER */

#header a:focus , #header a:hover {
    border:none;
}

#user-tools {
 line-height:1.8em;
}

#user-tools a, #logout-form button {
    color: var(--header-link-color);
    border:none;
    cursor:pointer;
}

#user-tools a:active, #user-tools a:hover,
#logout-form button:active, #logout-form button:active {
    color:white;
}

/* MESSAGES & ERRORS */

.description {  /* explanatory bar under black bars */
    font-size: 0.8rem;
    padding: 4px 15px 7px 15px;

    color:var(--user-bg);
    background-color:var(--user-accent);
    margin-left: 30px;
    margin-bottom: 7px;
    border-radius: 0px 0px 4px 4px;
    display: inline-block;
}

.description a{
    color:var(--user-bg);
    font-weight:bolder;
}

.description a:hover, .description a:active {
    border-bottom:1px solid var(--user-bg);
}


/*:::::::::::::::::::::::::::::::::::::::: forms.css */

/* FIELDSETS */

fieldset .fieldset-heading,
fieldset .inline-heading,
:not(.inline-related) .collapse summary {
    border: none;
    border-radius:4px;
    text-transform:uppercase;
}

/* COLLAPSIBLE FIELDSETS */

body summary::marker { /* get rid of "expand" triangles */
  content: none;
}

body :not(.inline-related) .collapse summary{ /* collapsed fieldset */
    color:var(--button-fg);
    background:var(--button-bg);
    border-radius:4px;
    width:400px;
    border:none;
}

body :not(.inline-related) .collapse summary:hover{
    background: var(--button-hover-bg);
}

body :not(.inline-related) .collapse summary h2{
    padding-left:10px;
    padding-right:10px;
    text-transform:none;
    width:400px;
}

body fieldset.module.aligned.collapse:has(details[open]){ /* open fieldset */
    border-radius:4px;
    background: var(--darkened-bg);
}

body :not(.inline-related) .collapse details:open > summary { 
    width:auto;
    border:none;
    color: var(--header-link-color);
    border-radius:4px;
    background-color:var(--header-bg);
}

body :not(.inline-related) .collapse details:open > summary h2{
    text-transform:uppercase;
}

/* CUSTOM FORM FIELDS */

.vLargeTextField,
.vIntegerField,
.vTextField {
    font-family:var(--font-family-monospace);
}

.inline-group .tabular td.original p { /* tiny text in left column */
    display:none;
}


/*:::::::::::::::::::::::::::::::::::::::: widgets.css */

/* SELECTOR (FILTER INTERFACE) */

body .selector-chosen-title { /* user permissions */
    background: var(--button-bg);
    color: var(--button-fg);
}

body .aligned .selector-chosen-title label{ /* user permissions */
    color: var(--button-fg);
}

/* CALENDARS & CLOCKS */

body .calendar td a:focus, body .timelist a:focus,
body .calendar td a:hover, body .timelist a:hover {
    background: var(--user-accent);
    color: white;
    border:none;
}

/* DATE & TIME */

body .datetimeshortcuts a{
  border:none;
}


/*:::::::::::::::::::::::::::::::::::::::: changelists.css */

body #changelist-filter a {
    border:none;
}

/*:::::::::::::::::::::::::::::::::::::::: fixes */

/* SUBMIT ROW */

/* remove border added in "LINKS" */
.submit-row a:focus, .submit-row a:hover {
    border:none;
}

/* fix vertical alignment of delete button */
.submit-row a.deletelink{
  position: relative;
  top: -3px;
}

/* right align save as new etc. buttons */
.submit-row{
  justify-content: flex-end;
}

/* move save button to right */
.submit-row input[type=submit].default {
  order: 99;
}

/* CUSTOM FORM FIELDS */

/* red outline on "don't touch" fields */

input#id_mail_srv:hover,
input#id_svg_ref:hover,
input#id_family:hover,
input#id_weight:hover,
input#id_adobe_url:hover,
input#id_style:hover{
  border-color:red;
  color:red;
}

/* special colors for illustrator filename */

#illustrator_fk-heading{ /* page settings */
  color:var(--illustrator-bright);
  background:var(--illustrator-dark);
}

#id_filename, /* module settings */
#id_illustrator_fk-0-filename{ /* page settings */
    border:3px solid var(--illustrator-bright);
}

/* PAGE & MODULE QUICK LINKS */

/* they're in their own div before user tools:

<div id="quick-links">
  <a id=page_button href=/cloud/svija/page/>pages</a><a id=module_button href=/cloud/svija/module/>modules</a>
</div>

*/

div#quick-links{
    margin:auto auto auto 0; /* left align next to logo */
    padding-bottom:0px;
    border:1px solid #fff2;
}

#quick-links a:link, #quick-links a:visited{

    display:inline-block;
    margin-right:1px;
    padding:3px 5px;
  
    border:1px solid var(--user-bright);
    border-radius:0px;
  
    text-transform:uppercase;
    font-weight:bolder;
  
    text-decoration:none;
  
    background:var(--user-bright);
    color:var(--user-bg);
    cursor:pointer;
    transition:0.5s;
}


#quick-links a:hover, #quick-links a:active{
    background:var(--user-bg);
    color:var(--user-bright);
}

@media screen and ( max-width: 700px ){
    div#quick-links{
        display:none;
    }
}


/*:::::::::::::::::::::::::::::::::::::::: fin */