/* Axfasts kundportal.
 *
 * Deras profil, inte vår: Bell Gothic i tre vikter, #f1f1ea som papper, #231f20
 * som svart och versaler med 1,7 px spärr i navigeringen. Måtten och färgerna
 * är hämtade ur den nuvarande portalens egen stilmall, inte gissade.
 *
 * Fristående från portal-plain.css. En look är markup och en stilmall av egen
 * kraft -- att ärva den enkla och skriva över den hade betytt att varje riktig
 * kundprofil börjar med att montera ner en annan.
 *
 * Typsnitten låg base64-kodade i en <style> på varje sidladdning: 112 kB som
 * ingen webbläsare kunde spara. Nu är de tre filer med lång cache, och woff2
 * tog dem från 87 till 67 kB. Licensen är kundens (Monotype); filerna har legat
 * i deras produktion sedan portalen byggdes. */

/* Tre familjer, en per fil, precis som förlagan deklarerar dem -- inte en
   familj i tre vikter. Skillnaden syns: med en familj väljer `font-weight: 700`
   den riktiga feta skäran, medan förlagan låter <strong> ärva Light och låter
   webbläsaren fetstila den själv. Två olika bokstavsformer på samma ställe.
   Kundens sida är facit, så det är kundens modell som gäller här.

   Varje skära anmäls som `normal`, som hos dem, och väljs på namn. */
@font-face {
    font-family: 'BellGothicStd-Light';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('axfast/BellGothicStd-Light.woff2') format('woff2'),
         url('axfast/BellGothicStd-Light.woff') format('woff');
}

@font-face {
    font-family: 'BellGothicStd-Bold';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('axfast/BellGothicStd-Bold.woff2') format('woff2'),
         url('axfast/BellGothicStd-Bold.woff') format('woff');
}

@font-face {
    font-family: 'BellGothicStd-Black';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('axfast/BellGothicStd-Black.woff2') format('woff2'),
         url('axfast/BellGothicStd-Black.woff') format('woff');
}


/* Bootstrap 3 sätter det här på allt, och rutnätet nedan räknar med det: en
   kolumn är 25 % *inklusive* sina 15 px luft, inte 25 % plus 30. Utan det blir
   varje kolumn 30 px för bred och behållaren 1200 i stället för 1170. */
*, *::before, *::after { box-sizing: border-box; }

/* Formulärelement ärver inte typsnitt av sig själva -- utan det här står
   knappen i webbläsarens systemtypsnitt mitt i sidan. Bootstrap har samma rad. */
input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

:root {
    --ax-paper: #f1f1ea;
    --ax-ink: #231f20;
    --ax-rule: #aeafad;
    --ax-link: #2c3e50;
}

/* Deras brödtext är 14 px. Litet med dagens mått, och deras beslut. Radhöjden
   är Bootswatchens 1,42857143 och inte en rundare siffra, för det är den som
   ligger under varje mått på den sida vi jämförs med. */
body {
    margin: 0;
    background: var(--ax-paper);
    color: var(--ax-ink);
    font: normal 14px/1.42857143 'BellGothicStd-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Bootstrap 3:s marginaler, som är de enda styckena på den sidan har. */
p { margin: 0 0 10.5px; }
ul, ol { margin: 0 0 10.5px; }

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

/* 1170 px inklusive luften, som .container. Innanför blir det 1140, och det är
   den bredden all text på sidan ska stå i linje med. */
.ax-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Logotyp och navigering står centrerat, som i förlagan. Den inloggade står
   uppe till höger och flyter förbi -- därför en clearfix på huvudet. */
.ax-head { text-align: center; }
.ax-head::after { content: ''; display: block; clear: both; }

.ax-who {
    float: right;
    text-align: right;
    font-size: 14px;
    line-height: 1.4;
}

.ax-who strong { font-weight: 700; }

.ax-signout {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 6px;
    border: 1px solid rgba(44, 62, 80, .52);
    background: none;
    color: var(--ax-link);
    font: inherit;
    cursor: pointer;
}

.ax-logo {
    width: 300px;
    height: 70px;
    margin: 15px auto;
    background-image: url('axfast/logo.png');
    background-repeat: no-repeat;
    background-size: 300px 70px;
}

/* Navigeringen: versaler, spärrad, med streck över och under och lodräta
   avdelare mellan posterna. */
.ax-nav {
    margin: 0;
    padding: 5px 0 4px;
    border-top: 1px solid var(--ax-ink);
    border-bottom: 1px solid var(--ax-ink);
    list-style: none;
}

.ax-nav li {
    display: inline-block;
    font-family: 'BellGothicStd-Bold', sans-serif;
    font-size: 14px;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ax-nav li:not(:last-child)::after { content: ' |'; }

.ax-nav a {
    margin: 0 10px;
    color: #000;
    text-decoration: none;
}

.ax-nav a:hover { color: #ccc; }

.ax-nav .ax-here { font-family: 'BellGothicStd-Black', sans-serif; }

/* Rubrikerna.
 *
 * Storlekarna är Bootswatch 3.3.7:s (Flatly), som är den stilmall förlagan
 * ligger ovanpå: axfastcss sätter bara familj och versaler och lämnar varje
 * mått åt temat. Att skriva en egen skala i stället var felet -- sidan såg
 * ut som deras men mätte inte som deras, och en h2 på 18 px där de har 32
 * är inte en nyansskillnad.
 *
 * Måtten sitter på elementen, inte på klasserna, av samma skäl som hos dem:
 * nästa rubrik någon skriver blir rätt utan att någon väljer en klass. */
h1, h2, h3, h4, h5, h6 {
    font-family: 'BellGothicStd-Black', sans-serif;
    font-weight: normal;
    line-height: 1.1;
    text-transform: uppercase;
}

h1 { font-size: 39px; }
h2 { font-size: 32px; }
h3 { font-size: 26px; }
h4 { font-size: 19px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }

h1, h2, h3 { margin: 21px 0 10.5px; }
h4, h5, h6 { margin: 10.5px 0; }

/* Sidhuvudets rubrik står i en .page-header hos dem: 42 px över, 21 under,
   en 9,5 px luft ned till linjen. */
.ax-title {
    margin: 42px 0 21px;
    padding-bottom: 9.5px;
    border-bottom: 1px solid transparent;
}

.ax-main { padding-bottom: 40px; }

.ax-foot {
    margin-top: 40px;
    padding: 20px;
    border-top: 1px solid var(--ax-rule);
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    text-transform: uppercase;
}

/* --- Sidorna ------------------------------------------------------------ */

.hh-portal-quiet { color: #6b6a67; font-size: 12px; }

.hh-portal-flash,
.hh-portal-note,
.hh-portal-error {
    margin: 0 0 20px;
    padding: 10px 14px;
    border-left: 3px solid var(--ax-rule);
    background: #e8e8e0;
}

.hh-portal-error { border-left-color: #a4252b; }

.hh-portal-article { margin-bottom: 40px; }

.hh-portal-byline {
    margin: 0 0 16px;
    font-size: 12px;
    color: #6b6a67;
}

.hh-portal-body img { max-width: 100%; height: auto; }
.hh-portal-body table { display: block; overflow-x: auto; max-width: 100%; }

.hh-portal-status {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--ax-rule);
    font-size: 12px;
    vertical-align: middle;
}

/* Listor står som förlagans tabeller: linjer under, luft omkring, inget ramverk. */
.hh-portal-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ax-rule);
}

.hh-portal-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ax-rule);
}

.hh-portal-list li.hh-portal-here a { font-weight: 700; }

/* The properties above a content page, for a reader reached through several:
 * the menu's letters without its rules, as Laravel's #subnav. */
.hh-portal-subnav {
    margin: 12px 0 8px;
    padding: 5px 0 4px;
    list-style: none;
    text-align: center;
}

.hh-portal-subnav li {
    display: inline-block;
    font-family: 'BellGothicStd-Bold', sans-serif;
    font-size: 14px;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.hh-portal-subnav li:not(:last-child)::after { content: ' |'; }

.hh-portal-subnav a {
    margin: 0 10px;
    color: #000;
    text-decoration: none;
}

.hh-portal-subnav a:hover { color: #ccc; }

.hh-portal-subnav .hh-portal-here { font-family: 'BellGothicStd-Black', sans-serif; }

/* A colleague's "Ändra" folds out under the row, the full width of it. */
.hh-portal-list li { flex-wrap: wrap; }
.hh-portal-colleague { flex-basis: 100%; }
.hh-portal-colleague > summary { cursor: pointer; color: var(--ax-link); }

.hh-portal-files {
    margin: 16px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--ax-rule);
    list-style: none;
}

.hh-portal-thread { margin: 24px 0 0; padding: 0; list-style: none; }

.hh-portal-thread li {
    margin-bottom: 16px;
    padding-left: 14px;
    border-left: 2px solid var(--ax-rule);
}

.hh-portal-thread p { margin: 0 0 4px; }

/* Avdelningsrubriken är en h2 och inget mer. Storleken kommer från skalan och
   strecket från .hh-hr som mallen ritar före den -- klassen ritade ett eget
   streck till, tjugo pixlar under det första. */

/* --- Formulär -----------------------------------------------------------
 *
 * Versaler och spärr hör hemma i navigeringen, i rubrikerna och i sidfoten --
 * det är de tre ställen deras stilmall har dem på. Fälttexter, tabellhuvuden
 * och knappar står som vanlig text, i brödtextens 14 px, med den fetstil
 * webbläsaren gör själv av Light. Att jag hade satt VERSALER på allt som såg
 * ut som en etikett var ett eget påfund. */

.hh-portal-form p { margin: 0 0 16px; }

.hh-portal-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}

/* Deras fält är temats .form-control, allihop: 15 px text, 10/15 i luft och en
   två pixlars kant i Flatlys ljusblå. */
.hh-portal-form input,
.hh-portal-form select,
.hh-portal-form textarea {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #dce4ec;
    border-radius: 4px;
    background: #fff;
    color: var(--ax-link);
    font-size: 15px;
    line-height: 1.42857143;
}

.hh-portal-form input:focus,
.hh-portal-form select:focus,
.hh-portal-form textarea:focus {
    border-color: var(--ax-link);
    outline: 0;
}


/* Deras knappar är temats .btn-primary.btn-sm: Flatlys #2c3e50, vit text, två
   pixlars kant och tretton pixlar. Inte portalens svarta, som är färgen på
   texten och på strecken. */
.hh-portal-form button,
.hh-portal-cta {
    display: inline-block;
    padding: 6px 9px;
    border: 2px solid var(--ax-link);
    border-radius: 3px;
    background: var(--ax-link);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}

/* En knapp som ska läsa som en länk: bara knappens mått tas bort. */
.hh-portal-linkbutton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ax-link);
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    cursor: pointer;
}

.hh-portal-reply { margin-top: 24px; }

.hh-portal-close {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--ax-rule);
}

.hh-portal-close p { margin: 0 0 8px; }
.hh-portal-closeform { display: inline; margin-right: 16px; }

.hh-portal-hidden { position: absolute; left: -9999px; }

/* Supportbannern ligger utanför profilen med flit. Den som tittar är inte
   kontots ägare, och det ska inte gå att missa. */
.hh-portal-support {
    margin: 0;
    padding: 10px 16px;
    background: #7a2d2d;
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.hh-portal-support strong { color: #fff; }

/* --- Spalter ------------------------------------------------------------
 *
 * Tolftedelar, namngivna som förlagans bootstrap-klasser, så att en sida här
 * går att lägga bredvid sin blade-fil och läsas. Flex-grow bär proportionen och
 * flex-basis bestämmer när raden bryts -- ingen mediefråga behövs, och en spalt
 * som inte får plats hamnar under i stället för att klämmas ihop. */

/* Tolv delar att fördela, med Bootstrap 3:s geometri och inte bara dess
   proportioner.
 *
 * Skillnaden är hela anledningen till att kolumnerna låg fel. En `gap: 30px`
 * lägger 30 px *mellan* kolumnerna och delar det som blir kvar; Bootstrap ger
 * varje kolumn 15 px inre luft på varje sida och drar raden 15 px utanför
 * behållaren, så att kolumnerna delar hela bredden och den yttersta texten
 * ändå står i linje med resten av sidan. Vid 1170 px blir en col-md-7 652,5 px
 * text hos dem och 647,5 px med gap -- och en col-md-6 555 mot 540. Fem till
 * femton pixlar per kolumn, varje gång, i fel riktning.
 *
 * Flexbox får stå kvar; det är bara måtten som är deras. Under 992 px ligger
 * allt under varandra, som col-md-* gör. */
.hh-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -15px;
    margin-right: -15px;
}

.hh-row > * {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.hh-row > :empty { display: none; }

@media (min-width: 992px) {
    .hh-c3 { flex: 0 0 25%; max-width: 25%; }
    .hh-c4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
    .hh-c5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
    .hh-c6 { flex: 0 0 50%; max-width: 50%; }
    .hh-c7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
    .hh-c8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
    .hh-c9 { flex: 0 0 75%; max-width: 75%; }
}

/* Förlagans <div class="hr"> mellan sidans avdelningar. */
.hh-hr { margin: 40px 0; border: 0; border-top: 1px solid var(--ax-ink, #231f20); }

/* Stora fält och full bredd på knappen, som förlagans input-lg och btn-block. */
/* Inloggningens fält och knapp är .input-lg och .btn-lg.btn-block hos dem. */
.hh-portal-form input.hh-portal-big {
    height: 66px;
    padding: 18px 27px;
    border-radius: 6px;
    font-size: 19px;
    line-height: 1.3333333;
}

.hh-portal-form button.hh-portal-wide {
    display: block;
    width: 100%;
    padding: 18px 27px;
    border-radius: 6px;
    font-size: 19px;
    line-height: 1.3333333;
}
.hh-portal-form label em { font-weight: normal; }

/* Rubriklistan bredvid en artikel: bara rubriker, inga datum -- kunden har
   valt bort dem. */
.hh-portal-headlines { margin: 0; padding: 0; list-style: none; }
.hh-portal-headlines li { padding: 4px 0; }
.hh-portal-headlines a.hh-portal-here { font-weight: 700; }
.hh-portal-more { margin-top: 12px; }
.hh-portal-more summary { cursor: pointer; }

/* Rubrikraden med sökrutan till höger. Flex och inte float: en float måste
   städas upp efter sig, och rubriken och rutan ska ändå stå på samma
   grundlinje. Under 992 px hamnar rutan under rubriken i stället för att
   klämma ihop den. */
.hh-portal-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 20px;
}

.hh-portal-headrow .hh-portal-subhead { margin-bottom: 0; }

/* Tio pixlar upp. Rubriken är 32 px och rutan 14, så en gemensam grundlinje
   sätter rutan lågt mot en versal som är dubbelt så hög -- ögat läser mitten,
   inte grundlinjen. `top` och inte marginal, så raden behåller sin höjd och
   siffran går att skruva på utan att något annat rör sig. */
.hh-portal-search {
    position: relative;
    top: -10px;
    margin: 0;
}

.hh-portal-search input {
    width: 220px;
    max-width: 100%;
    padding: 6px 10px;
    border: 2px solid #dce4ec;
    border-radius: 4px;
    background: #fff;
    color: var(--ax-link);
    font-size: 14px;
    line-height: 1.42857143;
}

.hh-portal-search input:focus { border-color: var(--ax-link); outline: 0; }

/* --- Hyresvärdens korta besked -------------------------------------------
 *
 * En inramad ruta på vitt, med luft över och under. Formen var först sidans
 * vanliga meddelanderuta -- ett streck till vänster på tonad botten -- men på
 * ett papper som redan är beige försvann den i sidan. Ram runt om och vit
 * botten lyfter den utan att göra den till en banner.
 *
 * En ram, en färg. Här fanns fyra -- rött för akut, gult för varning och så
 * vidare -- och de togs bort med stegen de hörde till: ett läge som heter akut
 * är ett löfte om leverans som applikationen inte kan hålla. Orden bär
 * tyngden i stället, och "VATTENAVSTÄNGNING" behöver ingen färg för att läsas
 * som viktigare än "SOPSORTERING".
 *
 * Rubriken versal och kort, meningen efter på samma rad. En flash är en
 * mening; går den över två rader är det en artikel och hör hemma där. */
.hh-portal-bulletin {
    margin: 20px 0;
    padding: 10px 14px;
    border: 3px solid var(--ax-link);
    background: #fff;
}

.hh-portal-bulletin-head {
    text-transform: uppercase;
    letter-spacing: .5px;
}

.hh-portal-bulletin-head::after { content: ' – '; }


/* --- Ärendetabellen ------------------------------------------------------ */

.hh-portal-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }

.hh-portal-table th {
    padding: 8px 12px 8px 0;
    border-bottom: 2px solid var(--ax-rule, #aeafad);
    font-weight: bold;
    text-align: left;
}

.hh-portal-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--ax-rule, #aeafad);
    vertical-align: top;
}

/* Förlagan nollar luften på bägge ytterkanterna, så att första kolumnen står
   i linje med rubriken ovanför och sista med sidans högerkant. Vänsterkanten
   får sina åtta pixlar tillbaka: raderna är randade, och text som ligger an mot
   bandets kant ser klämd ut på ett sätt den inte gör mot ett vitt papper. */
.hh-portal-table th:first-child, .hh-portal-table td:first-child { padding-left: 8px; }
.hh-portal-table th:last-child, .hh-portal-table td:last-child { padding-right: 0; }
.hh-portal-table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, .025); }

/* Väntar på hyresgästen: den enda raden där de själva kan göra något. */
.hh-portal-table tbody tr.hh-portal-waiting { background: #d9edf7; }

.hh-portal-num { width: 8%; white-space: nowrap; }
.hh-portal-who { width: 18%; }
.hh-portal-state { width: 18%; }

/* --- Hjälptexterna vid formuläret ---------------------------------------- */

/* Deras hjälptexter är vanliga stycken i en col-md-3: brödtextens 14 px och
   1,42857143 i radhöjd. 13 px gav 18,6 px mellan raderna där de har 20. */
.hh-portal-help-head { margin: 0 0 8px; }
.hh-portal-help { margin-bottom: 24px; }

/* --- Faktarutorna på ett ärende ------------------------------------------ */

.hh-portal-box {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid var(--ax-rule, #aeafad);
    background: rgba(255, 255, 255, .5);
    text-align: center;
}

.hh-portal-box-title {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.hh-portal-box-title:first-child { margin-top: 0; }
.hh-portal-box-info { display: block; font-size: 14px; }

.hh-portal-close { text-align: left; }
.hh-portal-smallbutton {
    padding: 4px 12px;
    border: 1px solid var(--ax-rule, #aeafad);
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.hh-portal-incoming { margin-bottom: 20px; }

/* --- Samtalet ------------------------------------------------------------ */

.hh-portal-chat { margin: 20px 0; padding: 0; list-style: none; overflow: hidden; }

.hh-portal-chat li { display: block; clear: both; margin-bottom: 15px; }

.hh-portal-bubble {
    display: inline-block;
    max-width: 75%;
    margin: 0 0 2px;
    padding: 10px 15px;
    border-radius: 20px;
    background: #cfe2f3;
    color: #2c3e50;
}

/* Ens egna står till höger och i fyllt blått, som i förlagan: vem som sa vad
   ska gå att se utan att läsa signaturen. */
.hh-portal-mine { text-align: right; }
.hh-portal-mine .hh-portal-bubble { background: #3498db; color: #fff; text-align: left; }
.hh-portal-mine .hh-portal-bubble a { color: #fff; }

.hh-portal-signature { display: block; color: #2c3e50; font-size: 12px; font-style: italic; }

.hh-portal-back { margin-top: 30px; }

.hh-portal-boxleft { text-align: left; }
.hh-portal-firsthead { margin-top: 0; padding-top: 0; border-top: 0; }

/* Filer som dras över sidan (assets/js/file-drop.js): ett blad över allt som
   säger vart de tar vägen, och under filfältet namnen på det som skickas.
   Utan övergång -- bladet är där när filen är det. */
.hh-drop-sheet {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ax-paper) 92%, transparent);
    border: 4px dashed var(--ax-rule);
    font-size: 24px; color: var(--ax-ink);
    pointer-events: none;
}
.hh-drop-sheet[hidden] { display: none; }
.hh-drop-list { font-size: 13px; margin-top: 6px; }
.hh-drop-caption { font-weight: bold; }