/************************************************************************\
 * File:    application.css                                             *
 *          Hipposoft 2025                                              *
 *                                                                      *
 * Purpose: Application stylesheet, all media types.                    *
 *          Very distantly based on the Collaboa default stylesheet.    *
 *                                                                      *
 * History: 12-Feb-2025 (ADH): RISC OS Open Ltd. 2025 variant finished. *
\************************************************************************/

@import url("/theme/riscosone.css");

/* Button-based dangerous action links */

div.dangerous img,
div.dangerous input[type='image']
{
  border: 2px solid #744040;
  background: #fee;
  margin: 1px;
}

@media (prefers-color-scheme: dark) {
  div.dangerous img,
  div.dangerous input[type='image']
  {
    background-color: #200;
    filter: brightness(150%);
  }
}

table td input[type='image']
{
  border: none;
  background: inherit;
}

/* Table-like action grids that use flexbox instead */

div.actions
{
  flex-wrap: wrap;
  align-items: flex-start;
}

div.actions div
{
  padding: 5px 10px;
  text-align: center;
}

/* Icon-based buttons */

div.content a.image,
div.content a.image:hover
{
  background: inherit;
  border: none;
}

@media (prefers-color-scheme: dark) {
  div.content a.image
  {
    filter: brightness(150%);
  }
}

div.content div.action_link {
  position: relative;
}

div.content div.action_link div.action_link_badge {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 6px;

  font-weight: bold;
  background: #fee;
  color: #744040;
  border: 2px solid #744040;
  padding: 0 2px;
  min-width: 28px;
  height: 32px;
  line-height: 32px;
  border-radius: 18px;
}

@media (prefers-color-scheme: dark) {
  div.content div.action_link div.action_link_badge {
    color: #fff;
    border-color: #ae6060;
    background-color: #300;
  }
}

/* Contains Pagy navigation */

div.pagination {
  text-align: left;
}

/* Special Hub cases for listing tables */

table.listing    td.yes,
table.listing    td.good,
table.bordered   td.yes,
table.bordered   td.good,
table.borderless td.yes,
table.borderless td.good
{
  background-color: #0f04;
}

table.listing    td.yes,
table.bordered   td.yes,
table.borderless td.yes
{
  text-align: center;
}

table.listing    td.no,
table.listing    td.warning,
table.bordered   td.no,
table.bordered   td.warning,
table.borderless td.no,
table.borderless td.warning
{
  background-color: #fa04;
}

table.listing    td.no,
table.bordered   td.no,
table.borderless td.no
{
  text-align: center;
}

table.listing    td.expired,
table.listing    td.bad,
table.bordered   td.expired,
table.bordered   td.bad,
table.borderless td.expired,
table.borderless td.bad
{
  background-color: #f004;
}

table.listing    td.expired,
table.bordered   td.expired,
table.borderless td.expired
{
  text-align: center;
  font-weight: bold;
}

table.horizontal.borderless th
{
  padding-right: 1em;
}

/* Untrusted actions */

form#untrusted_action_review th {
  text-align: right !important;
}

form#untrusted_action_review label {
  font-size: small;
}

form#untrusted_action_review select {
  width: 100%;
  height: 2em;
}

pre.untrusted_action_payload {
  margin: 0;
  white-space: pre-wrap;
}

/* Exception handling */

div.exception
{
  border: 1px solid #aaa;
  background: #eee;
  padding: 10px;
  color: #a77;
  font-size: 90%
}

@media (prefers-color-scheme: dark) {
  div.exception
  {
    color: #fff;
    border-color: #f00;
    background-color: #500;
  }
}

div.exception p
{
  margin: 0;
  padding: 0;
}

/* Login page privacy notice */

p#privacy_notice
{
  margin: 30px 0;
  padding: 15px;
  border: 1px solid black;
  background: #eee;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

@media (prefers-color-scheme: dark) {
  p#privacy_notice
  {
    border-color: #f00;
    background-color: #333;
  }
}

p#privacy_notice span#privacy_notice_text
{
  color: #800;
}

@media (prefers-color-scheme: dark) {
  p#privacy_notice span#privacy_notice_text
  {
    color: #fff;
  }
}

p#privacy_notice span#privacy_notice_icon
{
  display: inline-block;
  text-align: center;
  margin-right: 15px;
  flex-shrink: 0;
  flex-grow: 0;
  font-size: 28pt;
  line-height: 32pt;
  width: 32pt;
  height: 32pt;
  border-radius: 16pt;
  border: 1px solid red;
  color: red;
  background: white;
}

@media (prefers-color-scheme: dark) {
  p#privacy_notice span#privacy_notice_icon
  {
    border: 1px solid red;
    color: #fff;
    background: #300;
  }
}

/* A bit of help for very narrow viewports */

@media (max-width: 860px) {
  table.flexible.annotated td[data-label]:not([data-label=""])::before {
    width: 9em;
  }

  table.flexible.annotated td[data-label]:not([data-label=""]) {
    width: 100%;
    text-align: left;
    padding: 8px 8px 8px 10em !important;
  }
}

@media (max-width: 480px) {
  table.horizontal input[type='text'    ],
  table.horizontal input[type='search'  ],
  table.horizontal input[type='password'] {
    box-sizing: border-box;
    width:      100%;
  }
}