/*
    DJANGO Admin styles
*/

/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
  /* Primary brand colors */
  --primary: rgb(122, 203, 94);      /* світлий зелений */
  --secondary: rgb(95, 168, 75);     /* темніший зелений */
  --accent: rgb(160, 220, 140);      /* ще світліший акцент зелений */

  /* Yellow brand colors */
  --yellow: rgb(255, 243, 176);      /* світлий жовтий */
  --yellow-light: rgb(255, 250, 219);/* дуже світлий жовтий */

  /* Text colors */
  --primary-fg: #fff;                /* білий для кнопок та header */

  /* Button colors */
  --button-fg: var(--primary-fg);
  --button-bg: var(--secondary);
  --button-hover-bg: var(--primary);
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: var(--primary);

  /* Header colors */
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);
  --header-branding-color: var(--accent);

  /* Breadcrumbs */
  --breadcrumbs-bg: var(--primary);
  --breadcrumbs-fg: var(--accent);
  --breadcrumbs-link-fg: var(--primary-fg);

  /* Links */
  --link-fg: var(--primary);
  --link-hover-color: var(--accent);
  --link-selected-fg: var(--secondary);

  /* Other UI colors */
  --body-bg: #fff;
  --body-fg: #333;
  --body-quiet-color: #666;
  --body-medium-color: #444;
  --body-loud-color: #000;

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

  --error-fg: #ba2121;

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

  --darkened-bg: #f8f8f8; /* трохи темніший за body-bg */
  --selected-bg: #e4e4e4; /* для вибраних таблиць */
  --selected-row: #ffc;

    /* Button specific colors */
  --button-fg: #fff;
  --button-bg: var(--secondary);
  --button-hover-bg: var(--primary);
  --default-button-bg: var(--primary); /* default кнопки – primary, відрізняється від secondary */
  --default-button-hover-bg: var(--secondary);

  /* Close & delete buttons */
  --close-button-bg: #747474;
  --close-button-hover-bg: #333;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  /* Object tools (admin tools) */
  --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:
        "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";

    color-scheme: light;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-family: var(--font-family-primary);
    color: var(--body-fg);
    background: var(--body-bg);
}

/* LINKS */

a:link, a:visited {
    color: var(--link-fg);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

a:focus, a:hover {
    color: var(--link-hover-color);
}

a:focus {
    text-decoration: underline;
}

a img {
    border: none;
}

a.section:link, a.section:visited {
    color: var(--header-link-color);
    text-decoration: none;
}

a.section:focus, a.section:hover {
    text-decoration: underline;
}

/* GLOBAL DEFAULTS */

p, ol, ul, dl {
    margin: .2em 0 .8em 0;
}

p {
    padding: 0;
    line-height: 140%;
}

h1,h2,h3,h4,h5 {
    font-weight: bold;
}

h1 {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: 1.25rem;
}

h2 {
    font-size: 1rem;
    margin: 1em 0 .5em 0;
    text-align: center;
}

h2.subhead {
    font-weight: normal;
    margin-top: 0;
}

h3 {
    font-size: 0.875rem;
    margin: .8em 0 .3em 0;
    color: var(--body-medium-color);
    font-weight: bold;
}

h4 {
    font-size: 0.75rem;
    margin: 1em 0 .8em 0;
    padding-bottom: 3px;
    color: var(--body-medium-color);
}

h5 {
    font-size: 0.625rem;
    margin: 1.5em 0 .5em 0;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

ul > li {
    list-style-type: square;
    padding: 1px 0;
}

li ul {
    margin-bottom: 0;
}

li, dt, dd {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

dt {
    font-weight: bold;
    margin-top: 4px;
}

dd {
    margin-left: 0;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    min-width: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--hairline-color);
}

details summary {
    cursor: pointer;
}

blockquote {
    font-size: 0.6875rem;
    color: #777;
    margin-left: 2px;
    padding-left: 10px;
    border-left: 5px solid #ddd;
}

code, pre {
    font-family: var(--font-family-monospace);
    color: var(--body-quiet-color);
    font-size: 0.75rem;
    overflow-x: auto;
}

pre.literal-block {
    margin: 10px;
    background: var(--darkened-bg);
    padding: 6px 8px;
}

code strong {
    color: #930;
}

hr {
    clear: both;
    color: var(--hairline-color);
    background-color: var(--hairline-color);
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1px;
}

/* TEXT STYLES & MODIFIERS */

.small {
    font-size: 0.6875rem;
}

.mini {
    font-size: 0.625rem;
}

.help, p.help, form p.help, div.help, form div.help, div.help li {
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
}

div.help ul {
     margin-bottom: 0;
}

.help-tooltip {
    cursor: help;
}

/* Help text under field */
.help-below{
  display: block;
  margin-top: 6px;
}

/* Ensure select behaves like other inputs */
.form-flex select{
  width: 100%;
}

p img, h1 img, h2 img, h3 img, h4 img, td img {
    vertical-align: middle;
}

.quiet, a.quiet:link, a.quiet:visited {
    color: var(--body-quiet-color);
    font-weight: normal;
}

.clear {
    clear: both;
}

.nowrap {
    white-space: nowrap;
}

.hidden {
    display: none !important;
}

/* TABLES */

table {
    border-collapse: collapse;
    border-color: var(--border-color);
}

td, th {
    font-size: 0.8125rem;
    line-height: 1rem;
    border-bottom: 1px solid var(--hairline-color);
    vertical-align: top;
    padding: 8px;
}

th {
    font-weight: 500;
    text-align: left;
}

thead th,
tfoot td {
    color: var(--body-quiet-color);
    padding: 5px 10px;
    font-size: 0.6875rem;
    background: var(--body-bg);
    border: none;
    border-top: 1px solid var(--hairline-color);
    border-bottom: 1px solid var(--hairline-color);
}

tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--hairline-color);
}

thead th.required {
    font-weight: bold;
}

tr.alt {
    background: var(--darkened-bg);
}

tr:nth-child(odd), .row-form-errors {
    background: var(--body-bg);
}

tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist {
    background: var(--darkened-bg);
}

/* ===== Сторінка Журнали — таблиця оцінок ===== */
.marks-table {
  width: max-content;
  border-collapse: collapse;     /* таблиця займає рівно стільки, скільки потрібно */
  table-layout: auto;          /* ширина колонок за контентом (thead/td) */
}

/* Уніфікований паддінг для всіх клітинок */
.marks-table th,
.marks-table td {
  padding: 4px;                  /* єдиний відступ по горизонталі/вертикалі */
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;       /* не дає тексту роздувати ширину */
  word-break: break-word;
}

/* № — вузький стовпець */
.marks-table thead th:nth-child(1),
.marks-table tbody td:nth-child(1) {
  width: 36px;
  min-width: 24px;
  max-width: 36px;
  padding-left: 2px;
  padding-right: 2px;
}

/* ПІБ — ширший і вирівнюємо вліво */
.marks-table thead th:nth-child(2),
.marks-table tbody td:nth-child(2) {
  width: 22%;
  text-align: left;
  min-width: 220px;
  max-width: 360px;
}

/* Автоматична ширина для колонок з оцінками */
.marks-table thead th:nth-child(n+3),
.marks-table tbody td:nth-child(n+3) {
  min-width: 42px;      /* було 30px — зробили ширше */
  width: auto;
  max-width: none;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  white-space: nowrap;
}

/* Колонки оцінок — мінімально потрібні: або заголовок, або «квадратик» */
.marks-table th.journal-column,
.marks-table td.journal-column{
  width: 1%;               /* "стисни до вмісту" (поширений трюк для таблиць) */
  min-width: 46px;         /* щоб combo влізло (було 42px — можна лишити 42) */
  white-space: nowrap;     /* не переносити підпис/дату в одну «довгу» лінію */
}

.marks-table th.journal-column.col-active,
th.journal-column.col-active {
  background: rgba(122,203,94,.16);   /* ледь-зелена підсвітка */
  border-bottom: 2px solid rgb(122,203,94);
}

/* «Квадратики» всередині клітинок */
.combo-wrapper {
  position: relative;
  width: 42px;      /* розмір «квадратика» */
  margin: 0 auto;   /* центр по горизонталі в межах td */
  display: block;   /* можна й inline-block — обидва варіанти ок */
  z-index: 1;
}

.mark-combo {
  width: 100%;
  padding: 4px;
  border: none;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.combo-dropdown {
  display: none;
  z-index: 4;
}

.combo-dropdown.active {
  display: block;
  background: var(--primary-fg);
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  min-width: 60px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 14px;
  text-align: center;
  z-index: 3;
}

.combo-option {
  padding: 2px 6px;
  cursor: pointer;
  text-align: center;
}

.combo-option:hover {
  background-color: #f0f0f0;
}

/* Якщо всередині клітинки випадаючий список/інпут — нехай заповнює всю ширину */
.marks-table select,
.marks-table input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;        /* враховує паддінг у ширині */
  text-align: center;
}

/* Щоб «нб», «нбп», «зал» не роздували клітинку */
.marks-table .mark-cell {
  white-space: nowrap;           /* за потреби: не переносити позначки */
}


/* SORTABLE TABLES */

thead th {
    padding: 5px 10px;
    line-height: normal;
    text-transform: uppercase;
    background: var(--darkened-bg);
}

thead th a:link, thead th a:visited {
    color: var(--body-quiet-color);
}

thead th.sorted {
    background: var(--selected-bg);
}

thead th.sorted .text {
    padding-right: 42px;
}

table thead th {
  position: sticky;
  top: 0;
  background: var(--body-bg); /* або варіюй під твій дизайн */
  z-index: 2; /* щоб заголовок був над клітинками */
}

table thead th .text span {
    padding: 8px 10px;
    display: block;
}

table thead th .text a {
    display: block;
    cursor: pointer;
    padding: 8px 10px;
}

table thead th .text a:focus, table thead th .text a:hover {
    background: var(--selected-bg);
}

thead th.sorted a.sortremove {
    visibility: hidden;
}

table thead th.sorted:hover a.sortremove {
    visibility: visible;
}

table thead th.sorted .sortoptions {
    display: block;
    padding: 9px 5px 0 5px;
    float: right;
    text-align: right;
}

table thead th.sorted .sortpriority {
    font-size: .8em;
    min-width: 12px;
    text-align: center;
    vertical-align: 3px;
    margin-left: 2px;
    margin-right: 2px;
}

table thead th.sorted .sortoptions a {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(../img/sorting-icons.svg) 0 0 no-repeat;
    background-size: 14px auto;
}

table thead th.sorted .sortoptions a.sortremove {
    background-position: 0 0;
}

table thead th.sorted .sortoptions a.sortremove:after {
    content: '\\';
    position: absolute;
    top: -6px;
    left: 3px;
    font-weight: 200;
    font-size: 1.125rem;
    color: var(--body-quiet-color);
}

table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
    color: var(--link-fg);
}

table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
    background-position: 0 -14px;
}

table thead th.sorted .sortoptions a.ascending {
    background-position: 0 -28px;
}

table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
    background-position: 0 -42px;
}

table thead th.sorted .sortoptions a.descending {
    top: 1px;
    background-position: 0 -56px;
}

table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
    background-position: 0 -70px;
}

/* FORM DEFAULTS */

input, textarea, select, .form-row p {
    margin: 2px 0;
    padding: 2px 3px;
    vertical-align: middle;
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-size: 0.8125rem;
}
.form-row div.help {
    padding: 2px 3px;
}

textarea {
    vertical-align: top;
}

/*
Minifiers remove the default (text) "type" attribute from "input" HTML tags.
Add input:not([type]) to make the CSS stylesheet work the same.
*/
input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=url], input[type=number], input[type=tel], textarea, select,
.vTextField {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

/*
Minifiers remove the default (text) "type" attribute from "input" HTML tags.
Add input:not([type]) to make the CSS stylesheet work the same.
*/
input:not([type]):focus, input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=url]:focus, input[type=number]:focus,
input[type=tel]:focus, textarea:focus, select:focus, .vTextField:focus {
    border-color: var(--body-quiet-color);
}

select {
    height: 1.875rem;
}

select[multiple] {
    /* Allow HTML size attribute to override the height in the rule above. */
    height: auto;
    min-height: 150px;
}

/* FORM BUTTONS */

.button, input[type=submit], input[type=button], .submit-row input, a.button {
    background: var(--button-bg);
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--button-fg);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-size: 0.875rem;   /* 14px */
    line-height: 1.1;
}

a.button, button.button {
  display: inline-flex;
  align-items: center;   /* вирівнює текст вертикально */
  justify-content: center; /* центрує по горизонталі */
}

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

.button[disabled], input[type=submit][disabled], input[type=button][disabled] {
    opacity: 0.4;
}

.button.default, input[type=submit].default, .submit-row input.default {
    border: 1px solid transparent;
    font-weight: 400;
    background: var(--default-button-bg);
}

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

.button {
  text-decoration: none;
}

.button:hover {
  text-decoration: none;
}


/* MODULES */

.module {
    border: none;
    margin-bottom: 30px;
    background: var(--body-bg);
}

.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
    padding-left: 10px;
    padding-right: 10px;
}

.module blockquote {
    margin-left: 12px;
}

.module ul, .module ol {
    margin-left: 1.5em;
}

.module h3 {
    margin-top: .6em;
}

.module h2, .module caption, .inline-group h2 {
    margin: 0;
    padding: 8px;
    font-weight: 400;
    font-size: 0.8125rem;
    text-align: left;
    background: var(--header-bg);
    color: var(--header-link-color);
}

.module caption,
.inline-group h2 {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.module table {
    border-collapse: collapse;
}

/* MESSAGES & ERRORS */

ul.messagelist {
    padding: 0;
    margin: 0;
}

ul.messagelist li {
    display: block;
    font-weight: 400;
    font-size: 0.8125rem;
    padding: 10px 10px 10px 65px;
    margin: 0 0 10px 0;
    background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
    background-size: 16px auto;
    color: var(--body-fg);
    word-break: break-word;
}

ul.messagelist li.warning {
    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
    background-size: 14px auto;
}

ul.messagelist li.error {
    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
    background-size: 16px auto;
}

.errornote {
    font-size: 0.875rem;
    font-weight: 700;
    display: block;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    color: var(--error-fg);
    border: 1px solid var(--error-fg);
    border-radius: 4px;
    background-color: var(--body-bg);
    background-position: 5px 12px;
    overflow-wrap: break-word;
}

ul.errorlist {
    margin: 0 0 4px;
    padding: 0;
    color: var(--error-fg);
    background: var(--body-bg);
}

ul.errorlist li {
    font-size: 0.8125rem;
    display: block;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

ul.errorlist li:first-child {
    margin-top: 0;
}

ul.errorlist li a {
    color: inherit;
    text-decoration: underline;
}

td ul.errorlist {
    margin: 0;
    padding: 0;
}

td ul.errorlist li {
    margin: 0;
}

.form-row.errors {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--hairline-color);
    background: none;
}

.form-row.errors ul.errorlist li {
    padding-left: 0;
}

.errors input, .errors select, .errors textarea,
td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
    border: 1px solid var(--error-fg);
}

.description {
    font-size: 0.75rem;
    padding: 5px 0 0 12px;
}

/* BREADCRUMBS */

div.breadcrumbs {
    background: var(--breadcrumbs-bg);
    padding: 10px 40px;
    border: none;
    color: var(--breadcrumbs-fg);
    text-align: left;
}

div.breadcrumbs a {
    color: var(--breadcrumbs-link-fg);
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: var(--breadcrumbs-fg);
}

.breadcrumbs {
  background: var(--breadcrumbs-bg);
  padding: 0.5em 1em;
  color: var(--primary-fg);
  font-size: 14px;
}

.breadcrumbs a {
  color: #fff;
  text-decoration: underline;
}

.breadcrumbs a:hover {
  text-decoration: none;
}

/* ACTION ICONS */

.viewlink, .inlineviewlink {
    padding-left: 16px;
    background: url(../img/icon-viewlink.svg) 0 1px no-repeat;
}

.hidelink {
    padding-left: 16px;
    background: url(../img/icon-hidelink.svg) 0 1px no-repeat;
}

.addlink {
    padding-left: 16px;
    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
}

.changelink, .inlinechangelink {
    padding-left: 16px;
    background: url(../img/icon-changelink.svg) 0 1px no-repeat;
}

.deletelink {
    padding-left: 16px;
    background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
}

a.deletelink:link, a.deletelink:visited {
    color: #CC3434; /* XXX Probably unused? */
}

a.deletelink:focus, a.deletelink:hover {
    color: #993333; /* XXX Probably unused? */
    text-decoration: none;
}

/* OBJECT TOOLS */

.object-tools {
    font-size: 0.625rem;
    font-weight: bold;
    padding-left: 0;
    float: right;
    position: relative;
    margin-top: -48px;
}

.object-tools li {
    display: block;
    float: left;
    margin-left: 5px;
    height: 1rem;
}

.object-tools a {
    border-radius: 15px;
}

.object-tools a:link, .object-tools a:visited {
    display: block;
    float: left;
    padding: 3px 12px;
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-weight: 400;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.object-tools a:focus, .object-tools a:hover {
    background-color: var(--object-tools-hover-bg);
}

.object-tools a:focus{
    text-decoration: none;
}

.object-tools a.viewsitelink, .object-tools a.addlink {
    background-repeat: no-repeat;
    background-position: right 7px center;
    padding-right: 26px;
}

.object-tools a.viewsitelink {
    background-image: url(../img/tooltag-arrowright.svg);
}

.object-tools a.addlink {
    background-image: url(../img/tooltag-add.svg);
}

/* OBJECT HISTORY */

#change-history table {
    width: 100%;
}

#change-history table tbody th {
    width: 16em;
}

#change-history .paginator {
    color: var(--body-quiet-color);
    border-bottom: 1px solid var(--hairline-color);
    background: var(--body-bg);
    overflow: hidden;
}

/* PAGE STRUCTURE */

#container {
    position: relative;
    width: 100%;
    min-width: 980px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#container > .main {
    display: flex;
    flex: 1 0 auto;
}

.main > .content {
    flex:  1 0;
    max-width: 100%;
}

.skip-to-content-link {
    position: absolute;
    top: -999px;
    margin: 5px;
    padding: 5px;
    background: var(--body-bg);
    z-index: 1;
}

.skip-to-content-link:focus {
    left: 0px;
    top: 0px;
}

#content {
    padding: 20px 40px;
}

.dashboard #content {
    width: 600px;
}

#content-main {
    float: left;
    width: 100%;
}

#content-related {
    float: right;
    width: 260px;
    position: relative;
    margin-right: -300px;
}

@media (forced-colors: active) {
  #content-related {
      border: 1px solid;
  }
}

/* COLUMN TYPES */

.colMS {
    margin-right: 300px;
}

.colSM {
    margin-left: 300px;
}

.colSM #content-related {
    float: left;
    margin-right: 0;
    margin-left: -300px;
}

.colSM #content-main {
    float: right;
}

.popup .colM {
    width: auto;
}

/* HEADER */

#header {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px;
    background: var(--header-bg);
    color: var(--header-color);
}

#header a:link, #header a:visited, #logout-form button {
    color: var(--header-link-color);
}

/* #header a:focus , #header a:hover {
    text-decoration: underline;
} */

@media (forced-colors: active) {
  #header {
      border-bottom: 1px solid;
  }
}

#branding {
    display: flex;
}

#site-name {
    padding: 0;
    margin: 0;
    margin-inline-end: 20px;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--header-branding-color);
}

#site-name a:link, #site-name a:visited {
        color: var(--accent);
}

#branding h2 {
    padding: 0 10px;
    font-size: 0.875rem;
    margin: -8px 0 8px 0;
    font-weight: normal;
    color: var(--header-color);
}

#branding a:hover {
    text-decoration: none;
}

#logout-form {
    display: inline;
}

#logout-form button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-family-primary);
}

#user-tools {
    float: right;
    margin: 0 0 0 20px;
    text-align: right;
}

#user-tools, #logout-form button{
    padding: 0;
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#user-tools a, #logout-form button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#user-tools a:focus, #user-tools a:hover,
#logout-form button:active, #logout-form button:hover {
    text-decoration: none;
    border-bottom: 0;
}

#logout-form button:active, #logout-form button:hover {
    margin-bottom: 1px;
}

/* SIDEBAR */

#content-related {
    background: var(--darkened-bg);
}

#content-related .module {
    background: none;
}

#content-related h3 {
    color: var(--body-quiet-color);
    padding: 0 16px;
    margin: 0 0 16px;
}

#content-related h4 {
    font-size: 0.8125rem;
}

#content-related p {
    padding-left: 16px;
    padding-right: 16px;
}

#content-related .actionlist {
    padding: 0;
    margin: 16px;
}

#content-related .actionlist li {
    line-height: 1.2;
    margin-bottom: 10px;
    padding-left: 18px;
}

#content-related .module h2 {
    background: none;
    padding: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 1.125rem;
    color: var(--body-fg);
}

.delete-confirmation form input[type="submit"] {
    background: var(--delete-button-bg);
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--button-fg);
}

.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover {
    background: var(--delete-button-hover-bg);
}

.delete-confirmation form .cancel-link {
    display: inline-block;
    vertical-align: middle;
    height: 0.9375rem;
    line-height: 0.9375rem;
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--button-fg);
    background: var(--close-button-bg);
    margin: 0 0 0 10px;
}

.delete-confirmation form .cancel-link:active,
.delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:hover {
    background: var(--close-button-hover-bg);
}

/* POPUP */
.popup #content {
    padding: 20px;
}

.popup #container {
    min-width: 0;
}

.popup #header {
    padding: 10px 20px;
}

/* PAGINATOR */

.paginator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 26px;
    margin: 0;
    border-top: 1px solid var(--hairline-color);
    width: 100%;
}

.paginator a:link, .paginator a:visited {
    padding: 4px 10px;
    font-size: 1rem;
    border-radius: 6px;
    background: var(--button-bg);
    text-decoration: none;
    color: var(--button-fg);
}

.paginator a.showall {
    border: none;
    background: none;
    color: var(--link-fg);
}

.paginator a.showall:focus, .paginator a.showall:hover {
    background: none;
    color: var(--link-hover-color);
}

.paginator .end {
    margin-right: 6px;
}

.paginator .this-page {
    padding: 2px 6px;
    font-weight: bold;
    font-size: 0.8125rem;
    vertical-align: top;
}

.paginator a:focus, .paginator a:hover {
    color: var(--primary-fg);
    background: var(--link-hover-color);
}

.paginator input {
    margin-left: auto;
}

.base-svgs {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

.journal-column {
  min-width: 20px;  /* для оцінок */
  text-align: center;
  white-space: nowrap;
  position: relative;
  padding-top: 24px;
}

.journal-column:hover .col-actions{ opacity: 1; }

/* Мала панель дій у правому верхньому куті клітинки-шапки */
.col-actions {
  position: absolute;
  top: 2px;
  right: 4px;
  display: flex;
  gap: 4px;
  z-index: 999; /* поверх вмісту заголовка */
  opacity: .0;
  transition: opacity .15s;
}

/* Крихітна кнопка */
.btn-col-action {
  border: 1px solid var(--border-color);
  background: var(--body-bg);
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.btn-col-action:hover {
  background: var(--yellow-light);
  border-color: var(--link-fg);
}

.field-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  position: relative;
  z-index: 0;
}

.sticky-col {
  position: sticky;
  left: 0;                 /* перша колонка починається з нуля */
  background: var(--body-bg);
  z-index: 3;
}

.sticky-col-name {
  position: sticky;
  left: 36px;              /* РІВНО ширина № (36px), а не 33px */
  min-width: 220px;
  white-space: nowrap;
  background: var(--body-bg);
  z-index: 3;
}

.form-flex {
  display: flex;
  flex-direction: column;
  max-width: 600px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.form-group label {
  width: 200px; /* вирівнює по найбільшому заголовку */
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  flex: 1;
}

.button-group {
  display: flex;
  justify-content: right; /* центрує кнопки по горизонталі */
  gap: 10px; /* відстань між кнопками */
}

.button-group .button {
  width: auto; /* кнопки за контентом */
  min-width: 120px; /* або будь-яка потрібна ширина */
}

.button-group-vertical {
  display: flex;
  justify-content: right; /* центрує кнопки по горизонталі */
  flex-direction: column;
  align-items: flex-end; /* або start */
  gap: 10px;
}

.profile-container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 20px;
}

.profile-left {
  flex: 0 0 250px; /* ширина блоку зліва */
}

.profile-right {
  flex: 1;
}

.profile-avatar img {
  border-radius: 4px;
  max-width: 100%;
  height: auto;
}

a.icon-link {
  font-size: 2em; /* збільшити розмір іконки */
  padding: 6px; /* додати відступ для більшої області кліку */
  display: inline-block; /* щоб padding працював коректно */
  line-height: 1; /* зменшити зайві відступи зверху/знизу */
  text-decoration: none; /* прибирає підкреслення */
}

a.icon-link:hover {
  background-color: #f0f0f0; /* легке підсвічування при наведенні */
  border-radius: 6px;
}

.top-nav {
  padding: 10px 40px;
  background-color: var(--header-bg);
}

.top-nav .button {
  margin-right: 10px;
  background: var(--button-bg);
  color: var(--button-fg);
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.top-nav .button:hover {
  background: var(--button-hover-bg);
}

.logout-form {
  display: inline;
}

.logout-form .button {
  vertical-align: middle;
  background: var(--button-bg);
  border: none;
  color: var(--button-fg);
  cursor: pointer;
  font-size: 1em;
  padding: 5px 10px;
  border-radius: 4px;
}

table tbody tr {
  transition: background-color 0.2s;
}

table tbody tr:focus-within {
  background-color: var(--yellow-light); /* колір підсвічування */
}

.group-block {
  margin-bottom: 2em;
  padding: 1em;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #f9f9f9;
}

.group-block ul li {
  margin-bottom: 4px;
}

.profile-last-login {
  position: absolute;
  top: 100px; /* або скільки потрібно від верху */
  right: 60px; /* або підлаштуй під свій layout */
  font-size: 0.8rem;
  color: var(--body-medium-color);
}

.expelled {
  color: grey;
  font-style: italic;
  opacity: 0.7;
}

.head-student {
  color: goldenrod;
  font-weight: bold;
  margin-left: 4px;
}

.footer-version {
  font-size: 0.85em;
  color: #666;
  text-align: right;
  padding: 5px 10px;
  border-top: 0px solid #e0e0e0;
  margin-top: 10px;
}

/* стилі тільки для цієї таблиці */
table#lessons-table thead th {
  user-select: none;
  position: relative;
  padding-right: 1.5em; /* місце під стрілку */
}
table#lessons-table thead th.sortable {
  cursor: pointer; /* рука */
  user-select: none;
  position: relative;     /* для стрілок */
}
table#lessons-table thead th.sortable span,
table#lessons-table thead th.sortable div {
  display: inline-block;
  width: 100%;
}
table#lessons-table thead th.asc::after {
  content: "▲";
  position: absolute; right: 6px; font-size: 0.8em;
  color: var(--link-fg); /* зроби кольором посилання */
  pointer-events: none;  /* щоб кліки не заважали */
}
table#lessons-table thead th.desc::after {
  content: "▼";
  position: absolute; right: 6px; font-size: 0.8em;
  color: var(--link-fg); /* зроби кольором посилання */
  pointer-events: none;  /* щоб кліки не заважали */
}

/* --- ПІБ студентів у журналі --- */
.table .sticky-col-name a {
  color: #000;              /* чорний текст */
  font-weight: 600;         /* напівжирний */
  text-decoration: none;    /* прибрати підкреслення */
  font-size: 0.95rem;         /* було 0.8125rem, тепер більший шрифт */
  line-height: 1.1rem;     /* трохи більше міжряддя */
}

/* --- Для номера рядка теж трохи збільшуємо, щоб не виглядало дрібно --- */
.table .sticky-col {
  font-size: 0.95rem;
  font-weight: 500;
}

.table .sticky-col-name a:hover {
  text-decoration: underline; /* підкреслення при наведенні */
  color: #000;                /* трохи темніше */
}

.table .sticky-col-name .head-student {
  margin-left: 4px;
  color: #d4af37; /* золотиста зірка */
}

.table tbody tr:nth-child(even) td.sticky-col-name {
  background-color: #f7f7f7; /* чергування для зручності */
}

/* --- компактніші рядки у таблицях журналів --- */
.table td, .table th {
  padding: 4px 6px;      /* було 8px — менше відступів */
  line-height: 1.1rem;   /* трохи щільніше */
}

.highlight-cell {
  background-color: #e6ffe6 !important;
  transition: background-color 1.5s ease;
}

[id^="s"][id*="c"],    /* твої клітинки оцінок типу s{student}c{column} */
[id^="col"][id$="-bottom"],
[id^="col"] {
  scroll-margin-top: 84px; /* піджени під реальну висоту шапки + breadcrumbs + messages */
}

.combo-option.empty-option {
  color: #999;
  font-style: italic;
  border-bottom: 1px solid #ddd;
}
.combo-option.empty-option:hover {
  background-color: #ffecec;
  color: #000;
}

/* --- Список журналів на головній сторінці --- */
.journal-list {
  list-style-type: none;
  padding: 0;
  margin: 0.5em 0 1em 0;
}

.journal-list li {
  margin: 0.4em 0;
}

.journal-link {
  font-size: 1.1rem;          /* трохи більший шрифт */
  font-weight: 600;           /* напівжирний */
  color: #000;                /* насичений чорний колір */
  text-decoration: none;      /* прибрати підкреслення */
  display: inline-block;
}

.journal-link:hover {
  text-decoration: underline; /* з’являється лише при наведенні */
  color: #0056b3;             /* синюватий відтінок для кращої видимості */
}

.journal-list .quiet {
  font-size: 0.9rem;
  color: #666;
}

/* ==== FIX: Журнал — вирівнювання хедера з комірками ==== */
.marks-table thead th {
  padding: 4px !important;             /* такий самий, як у td */
  background: var(--body-bg);
  border-bottom: 1px solid var(--hairline-color);
  z-index: 8;
}
.marks-table th,
.marks-table td { box-sizing: border-box; }  /* щоб паддінг входив у ширину */

/* ==== FIX: єдине зміщення для липкої колонки ПІБ ==== */
.sticky-col-name { left: 36px !important; }

.marks-table thead th.journal-column {
  padding-top: 25px !important; /* відступ для тексту під кнопкою */
}