@import "styles.css";

/* ============================================
   440MUSIC GLOBAL OVERRIDES (Minimal Spacing)
============================================ */

/* BODY */
html,
body {
     background: #000;
     color: #fff;
     margin: 0;
     padding: 0;
}

/* GLOBAL LINKS */
a {
     color: #ff0;
     text-decoration: none;
}

a:hover {
     color: #fff;
}

hr {
     color:#ff0;
     height: 2px;
}
/* ============================================
   HEADER + TOPNAV
============================================ */

#header,
#topnav {
     background: #000;
     color: #ff0;
     margin: 0;
     padding: 5px;
}

#header a,
#topnav a,
#header .username,
#topnav .username {
     color: #ff0;
}

#header a:hover,
#topnav a:hover {
     color: #ffff33;
}

/* LOGO */
.login-logo {
     width: 100%;
     padding: 5px 5px 5px 20px;
     box-sizing: border-box;
}

.login-logo-img {
     float: left;
     height: auto;
     max-height: 65px;
}

/* Roundcube's toplogo override */
#toplogo {
     float: left !important;
     margin: 5px 0 5px 20px !important;
}

/* ============================================
   TASKBAR
============================================ */

#taskbar {
     background: #000 !important;
     border-bottom: 1px solid #ff0;
     padding: 5px !important;
     margin: 0;
}

#taskbar a.button-mail,
#taskbar a.button-addressbook,
#taskbar a.button-settings,
#taskbar a.button-logout {
     background: #0a0446;
     color: #ff0;
     border: none;
     margin: 0 3px;
     padding: 5px;
}

#taskbar a:hover {
     background: #10066d;
}

/* Selected */
#taskbar .button-selected .button-inner {
     background: #0a0446 !important;
     color: #ff0 !important;
     border-radius: 3px;
}

/* ============================================
   SIDEBAR / FOLDER LIST
============================================ */

#mailboxcontainer {
     background: #000 !important;
     border-right: 1px solid #ff0;
     padding: 5px !important;
}

.folderlist li a {
     color: #fff !important;
     padding: 3px 5px !important;
}

.folderlist li a:hover {
     color: #ff0 !important;
}

.folderlist li.selected>a {
     background: #0a0446 !important;
     color: #ff0 !important;
}

/* ============================================
   MESSAGE LIST
============================================ */

#messagelistheader {
     background: #000 !important;
     border-bottom: 1px solid #ff0;
     padding: 3px 5px !important;
}

#messagelistheader th {
     color: #fff !important;
     padding: 3px 5px !important;
}

#messagelist tbody tr {
     background: #000 !important;
     color: #fff !important;
}

#messagelist tbody tr:hover {
     background: #0a0446 !important;
}

#messagelist tbody tr.unread {
     font-weight: bold;
     color: #ff0 !important;
}

/* ============================================
   GENERIC UI BOXES + SEARCH
============================================ */

.uibox {
     background: #000;
     color: #fff;
     border: 1px solid #555;
     padding: 5px;
}

.searchbox,
#quicksearchbar {
     background: #000;
     color: #fff;
     padding: 3px;
}

.searchbox input {
     background: #0a0446;
     color: #fff;
     border: 1px solid #666;
     padding: 3px;
}

/* ============================================
   LOGIN PAGE STYLES
============================================ */

#login-form {
     padding: 5px;
}

.formcontent {
     padding: 5px;
}

.formbuttons input {
     padding: 5px 8px;
     margin: 5px 0;
}

/* ============================================
   FOOTER (Minimal Spacing)
============================================ */

#rcmfooter {
     background: #000;
     color: #ccc;
     padding: 10px;
     border-top: 1px solid #444;
     font-size: 12px;
     margin: 0;
}

/* GRID layout — 1 row, 4 columns */
#rcmfooter .footgrid {
     display: flex !important;
     flex-direction: row !important;
     flex-wrap: nowrap !important;
     justify-content: space-between;
     align-items: flex-start;
     gap: 10px;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0;
}

/* 4 equal columns */
#rcmfooter .footcol,
#rcmfooter .footsafe {
     flex: 1 1 25%;
     min-width: 200px;
     padding: 5px;
     margin: 0;
     box-sizing: border-box;
}

/* Titles */
#rcmfooter .footcol h6,
#rcmfooter .footsafe h5 {
     color: #fff;
     margin: 0 0 5px 0;
     padding: 0 0 3px 0;
     border-bottom: 1px solid #444;
}

/* Lists */
#rcmfooter ul,
#rcmfooter ol {
     margin: 0;
     padding: 0 0 0 10px;
}

#rcmfooter li {
     margin: 0 0 3px 0;
     padding: 0;
}

/* Safety box */
#rcmfooter .footsafe {
     background: #111;
     border: 1px solid #333;
     border-radius: 3px;
}

#rcmfooter .footsafe h5 {
     color: #ff0;
}

/* FOOTER BOTTOM */
.footbottom {
     text-align: center;
     padding: 5px;
     border-top: 1px solid #333;
     color: #aaa;
     font-size: 11px;
     margin-top: 5px;
}

/* ============================================
   RESPONSIVE
============================================ */

/* mobile collapse */
@media (max-width: 600px) {
     #rcmfooter .footgrid {
          flex-wrap: wrap !important;
     }

     #rcmfooter .footcol,
     #rcmfooter .footsafe {
          flex: 1 1 100%;
     }
}