@media all {
    .page-break { display: none; }
}

caption, th, td {
    padding: 0.2em 12px;
    vertical-align: top;
    line-height: 1.2;
    background: inherit;
}

th {
    font-weight: bold;
}

footer {
    min-height: 30px;
}

.season {
    margin-top: 20px;
}

.month {
    display: inline-block;
    width: 293px;
    margin-left: 20px;
}
.month .panel-heading {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}
.month .table th,
.month .table td {
    width: 14.28%;
    text-align: center;
}

.month2 {
    display: inline-block;
}
.month2 .month-label {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}
.month2 .table {
    border-collapse: collapse;
    margin-bottom: 0;
}
.month2 .table th,
.month2 .table td {
    width: 14.28%;
    text-align: center;
}

.year {
    text-align: center;
    margin-bottom: 20px;
}

span.day-week-7 {
    font-weight: bold;
}

td.today span {
    font-weight: bold;
    color: #69b469;
    border: 2px solid #69b469;
}

td.fast {
    background-color: #f2f2f2 !important;
}

td.feast {
    font-weight: bold;
    color: red !important;
    background-color: #fdf5e6 !important;
}
td.feast2 {
    font-weight: bold;
    color: white !important;
    background-color: #f55b5b !important;
}
td.feast3 {
    font-weight: bold;
    background-color: #f2f2f2 !important;
}
td.feast4 {
    font-weight: bold;
    color: red !important;
    background-color: #e6e6fa !important;
}
td.public-holiday {
    font-weight: bold;
    color: red !important;
    background-color: #c4d8e2 !important;
}

/* feast5–10 */
td.feast5 { font-weight: bold; color: white !important; background-color: #3498db !important; }
td.feast6 { font-weight: bold; color: #2ecc71 !important; background-color: #ecf0f1 !important; }
td.feast7 { font-weight: bold; color: #e74c3c !important; background-color: #e0e0e0 !important; }
td.feast8 { font-weight: bold; color: #8e44ad !important; background-color: #f9f9f9 !important; }
td.feast9 { font-weight: bold; color: #27ae60 !important; background-color: #f0f8ff !important; }
td.feast10 { font-weight: bold; color: #4c8474 !important; background-color: #ecf0f1 !important; }

td.details { cursor: pointer; }

td.description img { max-height: 70px; }
.event-description img { max-width: 150px; }

/* year table */
table.year td {
    padding: 5px;
}
table.year td span.day {
    padding: 2px;
}

a.day-link {
    color: inherit;
    text-decoration: inherit;
}

/* holidays table */
table.holidays td { overflow: hidden; }
table.holidays { table-layout: fixed; max-width: 850px; }
table.holidays span.comment { font-size: 11px; margin-left: 10px; }

.current { font-weight: bold; color: blue; }

/* socials */
#socials { padding-top: 15px; }
#socials .social { display: inline-block; margin-left: 10px; }
#socials .twitter-share-button { padding: 0; width: 75px !important; }

ul.feed { list-style-type: square; }
ul.feed li {
    clear: both;
    margin-bottom: 20px;
}
ul.feed li span.outlet { color: green; }
ul.feed li span.date { font-size: 12px; }
ul.feed li .story img { max-width: 100px; max-height: 100px; }
ul.feed li .tags { clear: both; padding-top: 5px; }

/* languages */
ul.language-list { list-style: none; padding: 0; }
ul.language-list li { margin-bottom: 5px; }
div.language-popover { max-width: 400px; }

/* custom popover */
.popover-wrapper { position: relative; display: inline-block; }
.custom-popover {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: none;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.custom-popover .language-list { list-style: none; padding: 0; }
.custom-popover .language-list li { margin: 5px 0; }
.custom-popover .language-list a { text-decoration: none; color: #333; }
.custom-popover .language-list a:hover { text-decoration: underline; }

/* weekdays */
.wd2 { font-size: small; }
.wd3 { font-size: x-small; }
.strike-through { text-decoration: line-through; }

/* special body */
body.okr { background-color: #f8f9fa; }

/* buttons */
.input-group-btn-border .btn { border: 1px solid #DDE1E5; }
.small-badge { font-size: 0.75em; padding: 0.2em 0.4em; }

/* sidebar */
.sidebar {
    height: 100%;
    padding-top: 20px;
    z-index: 1000;
    background-color: #f8f9fa;
}
.sidebar .nav-link { font-weight: 500; color: #333; }
.sidebar .nav-link.active { color: #0d6efd; background-color: #e9ecef; }

/* forms */
.checkbox-lg { transform: scale(1.2); margin-right: 10px; }
.checkbox-xl { transform: scale(1.5); margin-right: 10px; }

/* MS button */
#signInWithMicrosoftBtn {
    height: 41px;
    width: 300px;
    background-color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: #5e5e5e;
    border: 1px solid #8c8c8c;
    display: flex;
    align-items: center;
    justify-content: center;
}
#signInWithMicrosoftBtn img { height: 20px; margin-right: 8px; }

/* Month view styles */
table.month-view {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

th.day2,
td.day2 {
    /* border: 1px solid #ddd; */
    /* line-height: 1.42857143; */
    vertical-align: top !important;
    text-align: center;
    width: 14.28571429%;
}

td.day2 {
    height: 110px;
}

/* list view */
.tc-linked-row {
    border-left: 3px solid #9aa0a6;
    background: rgba(154, 160, 166, 0.06);
}

.tc-archived-row {
    border-left: 3px solid rgba(108, 117, 125, 0.35);
    background: rgba(108, 117, 125, 0.04);
}

.tc-archived-row.tc-linked-row { border-left-color: rgba(108,117,125,0.35); }


/* optional: only mute secondary columns, not the Name link */
.tc-linked-row td:not(:first-child) {
    color: #6c757d; /* bootstrap secondary-ish */
}

/* optional: keep the name link normal */
.tc-linked-row td:first-child a {
    color: inherit;
}

/* Details view */
.tc-linked-card { border-left: 3px solid #9aa0a6; }
.tc-archived-card { border-left: 3px solid rgba(108,117,125,.35); }
.tc-archived-card .card-body { background: rgba(108,117,125,.03); }
.tc-linked-card .card-body { background: rgba(154,160,166,.04); }

.tc-auth-card{
    max-width: 480px;
    width: 100%;
    margin: auto;
}

/* match auth card footprint */
.tc-buycard {
    max-width: 480px;      /* same as auth card */
    width: 100%;
}

/* keep it compact so it doesn't look taller than auth */
.tc-buycard .card-body {
    padding: 1rem;
}

.tc-buycard .small,
.tc-buycard ul {
    font-size: 0.9rem;
}

.tc-buycard ul {
    margin-bottom: 0.75rem;
}

.tc-buycard .btn {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

/* optional: tighten spacing between buttons */
.tc-buycard .btn + .btn {
    margin-top: .5rem;
}

.tc-cta-row .tc-auth-card{
    margin: 0;
}

.is-submitting input[type="checkbox"] { pointer-events: none; }
.is-submitting { opacity: .7; }

/* Bootstrap disables <button> properly, but <a> needs this */
a#checkout-btn.disabled {
    pointer-events: none;
    opacity: .65;
}

.tc-auth-card .g_id_signin {
    width: 100%;
    max-width: 340px;
    display: flex;
    justify-content: center;
}


/* Day view markers */

/* Make the day cell a positioning context */
td.day-td {
    position: relative;
}

/* Put marker in the top-right corner of the cell */
td.day-td .day-marker {
    position: absolute;
    top: 3px;
    right: 3px;

    width: 7px;
    height: 7px;
    border-radius: 50%;

    pointer-events: none;
    opacity: 0.95;
}

/* Optional: keep day number from touching edges */
/*td.day-td .day {*/
/*    display: inline-block;*/
/*    padding-right: 10px;  !* gives breathing room near marker *!*/
/*}*/


td .day {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* The number stays normal */
td .day-num {
    display: inline-block;
}




/*.day-marker {*/
/*    display: inline-block;*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    margin-left: 4px;*/
/*    border-radius: 50%;*/
/*    vertical-align: middle;*/
/*}*/

/* Moon phases */
.marker-moon_new {
    background: #333;
}

.marker-moon_full {
    background: #fafafa;
    border: 1px solid #999;
}

.marker-moon_first_quarter {
    background: linear-gradient(90deg, #333 50%, #f7f7f7 50%);
    border: 1px solid #999;
}

.marker-moon_last_quarter {
    background: linear-gradient(90deg, #f7f7f7 50%, #333 50%);
    border: 1px solid #999;
}


/* Others */
.marker-fasting { background: #8e44ad; }
.marker-public_holiday { background: #e74c3c; }
.marker-observance { background: #f1c40f; }




/* 0) Make sure the page doesn't allow horizontal scroll */
html, body { overflow-x: hidden; }

/* 1) Make month tiles responsive instead of fixed 293px + margin-left */
.month, .month2 {
    box-sizing: border-box;
}
@media (max-width: 576px) {
    .month, .month2 {
        display: block;        /* stack months vertically on small screens */
        width: 100%;           /* no fixed width */
        margin: 0 0 12px 0;    /* remove left margin that caused overflow */
    }

    /* keep tables from exceeding the viewport */
    .month .table,
    .month2 .table,
    table.month-view,
    table.year {
        width: 100%;
    }
}

/* Mobile navbar compaction */
@media (max-width: 991.98px) { /* matches navbar-expand-lg breakpoints */
    .navbar { padding: .35rem .75rem; }                 /* reduce bar height */
    .navbar-brand { margin-right: .5rem !important; }
    .navbar-brand img { height: 22px; }                 /* slightly smaller logo */
    .navbar-toggler { padding: .25rem .5rem; }

    .navbar-collapse { padding: .25rem 0 .5rem; }       /* trim collapse padding */
    .navbar-nav { gap: .25rem; }                        /* tighter vertical stack */

    /* Plain links: smaller touch padding but still tappable (~44px line height) */
    .navbar-nav .nav-link { padding: .4rem 0; }

    /* Buttons: small & no desktop margins on mobile */
    .navbar-nav .btn { padding: .375rem .5rem; font-size: .9rem; }
    .navbar-nav .me-3 { margin-right: 0 !important; }

    /* Avoid full-width blocky look unless you want it */
    .navbar-nav .btn.w-100 { max-width: 100%; } /* keep current behavior if used */
}